Jump to content

wright67uk

Members
 View Profile  See their activity

  • Posts

    454

  • Joined

  • Last visited

 Content Type 

Everything posted by wright67uk

  1. wright67uk
    i can use float left however the 5th element doesnt exist until the user has done the drag and drop? '
  2. wright67uk
    "I would store each row of bowlitems in an array, if the row exceeds the image width, then start a new row in the array" Thankyou, Are you saying that if only 5 images fit into a row and the user drops a 6th image, then the 6th image would go to the next row in the array? Im quite new to arrays etc. How can i implement this in my code? Thanks for the reply!
  3. wright67uk
    Hello; http://www.1pw.co.uk/demo3.html How can i change my javascript to ensure that images being dropped, never overflow div.bowlpic? Many thanks <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>Drag and Drop Demo</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="icon.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.ui.main.js"></script> <style type="text/css"> .products{ list-style:none; padding:0px; height:100%; } .products li{ display:inline; float:left; margin:10px; } .item{ display:block; text-decoration:none; } .item img{ border:1px solid #333; } .item p{ margin:0; font-weight:bold; text-align:center; color:#c3c3c3; } .cart{ position:fixed; right:0; top:0; width:300px; height:100%; background:#ccc; padding:0px 10px; } .bowlpic { height:300px; width:260px; overflow:none; background-image:url(bowl.jpg); background-repeat:no-repeat; background-color:#FF0000; float:left; } h1{ text-align:center; color:#555; } h2{ position:absolute; font-size:16px; left:10px; bottom:20px; color:#555; } .total{ margin:0; text-align:right; padding-right:20px; } #productpics { height:300px; width:1000px; } #arrow {height:300px; width:300px; float:left; } </style> <script> var data = {"total":0,"rows":[]}; var totalCost = 0; var bowlItems = 10; $(function(){ $('#cartcontent').datagrid({ singleSelect:true }); $('.item').draggable({ revert:true, proxy:'clone', onStartDrag:function(){ $(this).draggable('options').cursor = 'not-allowed'; $(this).draggable('proxy').css('z-index',10); }, onStopDrag:function(){ $(this).draggable('options').cursor='move'; } }); $('.bowlpic').droppable({ onDragEnter:function(e,source){ $(source).draggable('options').cursor='auto'; }, onDragLeave:function(e,source){ $(source).draggable('options').cursor='not-allowed'; }, onDrop:function(e,source){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); addProduct(name, parseFloat(price.split('£')[1])); bowlItems = bowlItems + 50; $('.bowlpic').append('<img style="width: 50px; position: absolute; margin-left:'+ bowlItems +'px;" src="' + $(source).children().attr('src') +'"/>'); } }); }); function addProduct(name,price){ function add(){ for(var i=0; i<data.total; i++){ var row = data.rows[i]; if (row.name == name){ row.quantity += 1; return; } } data.total += 1; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalCost += price; $('#cartcontent').datagrid('loadData', data); $('div.cart .total').html('Total: £'+totalCost); } </script> </head> <body style="margin:0;padding:0;height:100%;background:#fafafa;"> <div id="productpics"> <ul class="products"> <li> <a href="#" class="item"> <img src="shirt1.gif"/> <div> <p>Balloon</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt2.gif"/> <div> <p>Feeling</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt3.gif"/> <div> <p>Elephant</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt4.gif"/> <div> <p>Stamps</p> <p>Price:£333</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt5.gif"/> <div> <p>Monogram</p> <p>Price:£25</p> </div> </a> </li> </ul> </div> <div class="cart"> <h1>Shopping Cart</h1> <div style="background:#fff"> <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;"> <thead> <tr> <th field="name" width=140>Name</th> <th field="quantity" width=60 align="right">Quantity</th> <th field="price" width=60 align="right">Price</th> </tr> </thead> </table> </div> <p class="total">Total: £0</p> </div> <div class="bowlpic"></div> <div id="arrow"><p> < drag to here</p></div> </body> </html>
  4. wright67uk
    I have a mocked up page www.1pw.co.uk/demo.html After dragging an image over the bowl background I would a copy of the image to stay in situe. eg. If i were to drag the baloon shirt to the bowl three times, then I would see three baloon shirts in my bowl. What is the best way of achieving this and how do I go about it? Many thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>Drag and Drop Demo</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="icon.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.ui.main.js"></script> <style type="text/css"> .products{ list-style:none; margin-right:300px; padding:0px; height:100%; } .products li{ display:inline; float:left; margin:10px; } .item{ display:block; text-decoration:none; } .item img{ border:1px solid #333; } .item p{ margin:0; font-weight:bold; text-align:center; color:#c3c3c3; } .cart{ position:fixed; right:0; top:0; width:300px; height:100%; background:#ccc; padding:0px 10px; background-image:url(bowl.jpg); background-repeat:no-repeat; background-position:center; } h1{ text-align:center; color:#555; } h2{ position:absolute; font-size:16px; left:10px; bottom:20px; color:#555; } .total{ margin:0; text-align:right; padding-right:20px; } </style> <script> var data = {"total":0,"rows":[]}; var totalCost = 0; $(function(){ $('#cartcontent').datagrid({ singleSelect:true }); $('.item').draggable({ revert:true, proxy:'clone', onStartDrag:function(){ $(this).draggable('options').cursor = 'not-allowed'; $(this).draggable('proxy').css('z-index',10); }, onStopDrag:function(){ $(this).draggable('options').cursor='move'; } }); $('.cart').droppable({ onDragEnter:function(e,source){ $(source).draggable('options').cursor='auto'; }, onDragLeave:function(e,source){ $(source).draggable('options').cursor='not-allowed'; }, onDrop:function(e,source){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); addProduct(name, parseFloat(price.split('£')[1])); } }); }); function addProduct(name,price){ function add(){ for(var i=0; i<data.total; i++){ var row = data.rows[i]; if (row.name == name){ row.quantity += 1; return; } } data.total += 1; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalCost += price; $('#cartcontent').datagrid('loadData', data); $('div.cart .total').html('Total: £'+totalCost); } </script> </head> <body style="margin:0;padding:0;height:100%;background:#fafafa;"> <ul class="products"> <li> <a href="#" class="item"> <img src="shirt1.gif"/> <div> <p>Balloon</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt2.gif"/> <div> <p>Feeling</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt3.gif"/> <div> <p>Elephant</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt4.gif"/> <div> <p>Stamps</p> <p>Price:£333</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt5.gif"/> <div> <p>Monogram</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt6.gif"/> <div> <p>Rolling</p> <p>Price:£25</p> </div> </a> </li> </ul> <div class="cart"> <h1>Shopping Cart</h1> <div style="background:#fff"> <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;"> <thead> <tr> <th field="name" width=140>Name</th> <th field="quantity" width=60 align="right">Quantity</th> <th field="price" width=60 align="right">Price</th> </tr> </thead> </table> </div> <p class="total">Total: £0</p> <h2>Drop here to add to cart</h2> </div> </body> </html>
  5. wright67uk
    I have a very basic page which I have mocked up to use as a referance point; www.1pw.co.uk/drag.html Page works in IE What I would like to do is to; 1) change the value of the image of my products from 'No' to 'Yes' when it enters the red square 2) pull some further info from a database about each of the products which have a value of 'Yes' . ie price, size etc. and display the info below the red box. Im guessing the first point would involve mapping out some co-ordinates. Could anyone explain a theory behind the correct way of doing this. Could anyone guide me to a decent tutorial or step by step guide? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drag and Drop</title> <style> <!-- .drag{position:relative;cursor:hand} #box {width:200px; height:200px; margin-right:auto; margin-left:auto; background-color:#F00;} --></style> <script language="JavaScript1.2"> <!-- /* Drag and Drop Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ var dragapproved=false var z,x,y function move(){ if (event.button==1&&dragapproved){ z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false } } function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move } } document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") //--> </script> </head> <body> <img src="star.png" class="drag" value="no"/> <img src="grass.png" class="drag" value="no"/> <div id="box"></div> </body> </html>
  6. wright67uk
    IVe also tried this page with different colors and fonts; www.hertfordlogs.co.uk/brown No metas, alts, or titles as of yet. Any feedback would be great.
  7. wright67uk
    fair point - title added! what does "the old o.0" mean? yes just 1 page done for now. thankyou for the current feedback
  8. wright67uk
    Hello Im looking for initial opinions on the page www.hertfordlogs.co.uk . Its only basic and ive only been given basic content for each page (a paragraph of text and a photo), so not a lot to go on really. Would love to hear from you, Ed.
  9. wright67uk
    Brilliant, works well. and thankyou very much.
  10. wright67uk
    Im trying to add some info to an existing cell in a mysql database. The cell currently reads: This is a piece of information. I would like to update the cell to read: This is a piece of information. a great piece of info. I have a variable with the following; $info = a great piece of info. Is it possible to add $info to the existing cell via php eg. <?php mysql_query("UPDATE mytable SET info = '$info' WHERE row = '$row'"); ?> all fine except I dont want to SET the info to $info I simply want to add $info onto the end of the existing data in the info record. Is this possible and how do i change the above query and go about it? Many thanks
  11. wright67uk
    Im finding it difficult to explain my problem however I shall give it my best shot; my page http://www.1pw.co.uk/circlesmin.html As you will see from my link, I have some thumbnails in the small circle which with the help of javascript cause an image to appear in the larger circle. Ok brilliant! things seem to work fine! After a few minutes of hovering here and there in each of the three circles, things begin to go a little weird. The thumbnails display as normal, however the links are being read from one of the other small circles. eg. If im in the contact details small circle, I can move my mouse into the empty area, and it will as if by magic be reading the links from the portfolio circle. As you will see from the Jquery below, ive played around with z-index, ive tried it with and without mentioning z index in the last chunk of code, but either way not a lot changes. Ive asked for help in another forum, but ppl said it looked as though my page was fine, so please can i state that this happens after a while of hovering here and there, and not always immediately. $(function() { /* when page loads animate the about section by default */ //move($('#about'),2000,2); $('#menu > a').mouseover( function(){ var $this = $(this); move($this,800,1); } ); /* function to animate / show one circle. speed is the time it takes to show the circle turns is the turns the circle gives around the big circle */ function move($elem,speed,turns){ var id = $elem.attr('id'); var $circle = $('#circle_'+id); /* if hover the same one nothing happens */ if($circle.css('opacity')==1) return; /* change the image */ $('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650); /* if there's a circle already, then let's remove it: either animate it in a circular movement or just fading out, depending on the current position of it */ /* left, top */ $('#content .circle').each(function(i){ var $theCircle = $(this); if($theCircle.css('opacity')==1) $theCircle.stop() .animate({ path : new $.path.arc({ center : [180,189], radius : 257, start : 65, end : -110, dir : -1 }), opacity: '0' },1500); else $theCircle.stop() .animate({opacity: '0'},200); }); /* make the circle appear in a circular movement */ var end = 65 - 360 * (turns-1); $circle.stop() .animate({ path : new $.path.arc({ center : [180,189], radius : 257, start : 180, end : end, dir : -1 }), opacity: '1' },speed); } $('.thumbs img, .thumbs2 img, .thumbs3 img').hover(function() { $(this).parent().css({'z-index' : '990'}); $(this).css ({'z-index' : '1000'}); var imgID = $(this).attr('id'); var largeImgUrl = $(this).parent().attr('href'); $('div.circleBig').append('<img class="imgInCircle" src="'+largeImgUrl+'">'); }, function(){ $('div.circleBig img').remove(); $(this).css ({'z-index' : '001'}); $(this).parent().css ({'z-index' : '001'}); }); }); I am slowly going bald pulling my hair out over this one. I really dont want to be using flash for this project! so any suggestions would be great!
  12. wright67uk
    Im trying to assign a hover state to the nine thumbnail images in the code below; Ive tried .thumbs a img:hover {height:100px; width:100px;} to make the image larger but with no joy. any ideas? (im using IE) www.1pw.co.uk/circles.html eventually I plan to get the hovered state image to appear in the large circle and was thinking along the lines of; .thumbs a img:hover {position: absoloute; top 150px; left 150px} ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Animated Circular Portfolio with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Animated Circular Portfolio with jQuery" /> <meta name="keywords" content="jquery, animate, circle, round, portfolio, design, tutorial"/> <link rel="stylesheet" type="text/css" media="screen"/> <style> *{ margin:0; padding:0; } body{ font-family:Arial; background:#a7cede; } .title{ position:absolute; top:0px; left:0px; width:130px; height:570px; background:#a7cede url(http://www.1pw.co.uk/title.png) no-repeat top left; } a.back{ background:transparent url(http://www.1pw.co.uk/back.png) no-repeat 0px 0px; position:absolute; width:150px; height:27px; outline:none; top:2px; right:0px; } .wrapper{ font-family: Verdana; font-size:11px; width:600px; height:600px; position:relative; top:11px; left:11px; } .images img{ display:none; position:absolute; left:6px; top:6px; } .circleBig{ position:absolute; top:0px; left:0px; width:368px; height:368px; background:transparent url(http://www.1pw.co.uk/circlebg.png) no-repeat top left; } .menu{ position:absolute; width:101px; height:74px; top:210px; left:220px; z-index:999; } a.about, a.portfolio, a.contact{ float:left; clear:both; height:23px; margin-bottom:10px; width:105px; text-indent:-2000000px; opacity:0.8; background:transparent url(http://www.1pw.co.uk/menu.png) no-repeat top left; } a.portfolio{ width:90px; background-position:-105px 0px; } a.contact{ width:88px; background-position:-199px 0px; } a.about:hover, a.portfolio:hover, a.contact:hover{ opacity:1.0; } .circle{ margin-top:-88px; margin-left:-88px; width:176px; height:176px; position:absolute; left:0; top:0; background:transparent url(http://www.1pw.co.uk/circle.png) no-repeat top left; z-index:10; opacity:0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); } .description{ width:120px; margin:40px auto; text-align:center; } .description ul{ list-style:none; text-align:center; } .description ul a{ line-height:30px; font-weight:bold; color:#fff; text-decoration:none; text-transform:uppercase; font-size:11px; text-shadow:1px 1px 1px #aaa; } .description ul a:hover{ color:#f0f0f0; } .thumbs a img{ border:3px solid #f9f9f9; -moz-box-shadow:1px 1px 2px #999; -webkit-box-shadow:1px 1px 2px #999; box-shadow:1px 1px 2px #999; } .thumbs a img:hover {height:100px; width:100px;} </style> <!--[if IE]> <style> .circle{ background:transparent url(http://www.1pw.co.uk/circleIE.gif) no-repeat top left; } .description ul a{ font-weight:normal; } </style> <![endif]--> </head> <body> <div id="content"> <div class="wrapper"> <div id="images" class="images"> <img id="image_about" src="http://www.1pw.co.uk/1.png" alt="" width="352" height="352" style="display:block;"/> <img id="image_portfolio" src="http://www.1pw.co.uk/2.png" alt="" width="352" height="352"/> <img id="image_contact" src="http://www.1pw.co.uk/3.png" alt="" width="352" height="352" /> </div> <div class="circleBig"> <div id="menu" class="menu"> <a id="about" class="about" href="">About me</a> <a id="portfolio" class="portfolio" href="">Portfolio</a> <a id="contact" class="contact" href="">Contact</a> </div> </div> </div> <div id="circle_about" class="circle"> <div class="description"> <ul> <li><a href="#">Who I am</a></li> <li><a href="#">What I do</a></li> <li><a href="#">My CV</a></li> </ul> </div> </div> <div id="circle_portfolio" class="circle"> <div class="description"> <div class="thumbs"> <a href="thumbs/1.jpg"><img src="thumbs/1.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/3793395986/in/set-72157622106008372/"><img src="thumbs/2.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/4242525457/in/set-72157622106008372/"><img src="thumbs/3.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/3799109785/in/set-72157622106008372/"><img src="thumbs/4.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/3871609087/in/set-72157622106008372/"><img src="thumbs/5.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/3872388968/in/set-72157622106008372/"><img src="thumbs/6.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/3866147681/in/set-72157622106008372/"><img src="thumbs/7.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/3872389922/in/set-72157622106008372/"><img src="thumbs/8.jpg" alt=""/></a> <a href="http://www.flickr.com/photos/patdavid/4127983465/in/set-72157622106008372/"><img src="thumbs/9.jpg" alt=""/></a> </div> </div> </div> <div id="circle_contact" class="circle"> <div class="description"> <ul> <li><a href="#">Email </a></li> <li><a href="#">Phone</a></li> <li><a href="#">Website</a></li> </ul> </div> </div> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://www.1pw.co.uk/jquery.path.js"></script> <script type="text/javascript"> $(function() { /* when page loads animate the about section by default */ //move($('#about'),2000,2); $('#menu > a').mouseover( function(){ var $this = $(this); move($this,800,1); } ); /* function to animate / show one circle. speed is the time it takes to show the circle turns is the turns the circle gives around the big circle */ function move($elem,speed,turns){ var id = $elem.attr('id'); var $circle = $('#circle_'+id); /* if hover the same one nothing happens */ if($circle.css('opacity')==1) return; /* change the image */ $('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650); /* if there's a circle already, then let's remove it: either animate it in a circular movement or just fading out, depending on the current position of it */ /* left, top */ $('#content .circle').each(function(i){ var $theCircle = $(this); if($theCircle.css('opacity')==1) $theCircle.stop() .animate({ path : new $.path.arc({ center : [180,189], radius : 257, start : 65, end : -110, dir : -1 }), opacity: '0' },1500); else $theCircle.stop() .animate({opacity: '0'},200); }); /* make the circle appear in a circular movement */ var end = 65 - 360 * (turns-1); $circle.stop() .animate({ path : new $.path.arc({ center : [180,189], radius : 257, start : 180, end : end, dir : -1 }), opacity: '1' },speed); } }); </script> </body> </html> Thankyou for reading.
  13. wright67uk
    Any reason why there are 12,000+ views for this post? lol
  14. wright67uk
    Brilliant thanyou for that! The alert box seemed to work for 'alt' or for 'O' or for 'alt+o', I think this is just a cross browser thing. changed it to work just by pressing 'o' anyway. one more thing. If i were to use a custom made alert box as below then how would i tie in this method with it; eg; www.1pw.co.uk/test <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .alert { display:none; position:absolute; top:1px; left:1px; width:300px; background-color:white; border-style:solid; border-width:1px; padding:15px 20px 5px 20px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jkey-1.2[1].js"></script> </head> <body> <script> $(document).jkey('o', function(){ alert('Pressed o');}); </script> <div id="AlertBox" class="alert"> <p> Hi! This is a test. </p> <p> It is only a test. If this had been the real thing, then this would not be a test. </p> <form style="text-align:right"> <input type="button" value="OK" style="width:75px;" onclick="document.getElementById('AlertBox').style.display='none'"> </form> </div> <script type="text/javascript"><!-- function DisplayAlert(id,left,top) { document.getElementById(id).style.left=left+'px'; document.getElementById(id).style.top=top+'px'; document.getElementById(id).style.display='block'; } //--></script> <script type="text/javascript"><!-- function DoSomething() { var something = false; if(something) { // do this section } else { DisplayAlert('AlertBox',100,50); } } //--></script> <p> <a href="javascript:DoSomething()"> Click here</a> to demonstrate the alert box alternative. or press alt + o for the original alert box </p> </body> </html> thanks for your help so far!
  15. wright67uk
    Thank you for the reply Adam, I originally asked this question on the CSS forum, and was told that it isnt possible with html and css alone. So I thought that firstI would find out wether this was possible using jquery. It would be great if you could direct me to a tutorial that would show me how to, add keypress() functions to a hover class within a list. Or a working example of somthing that already exists would help me see the theory behind this. I wouldnt neccesarily need a .mouseover() function. as this slide out gadget would be for people that cant use a mouse, eg. users with with poor motor skills, or hand eye co-ordination. Im extremely new to jquery and extremely willing to learn aswell.
  16. wright67uk
    <style type="text/css"> #A1{background:url(1.jpg) no-repeat;} #image li a{width:30px; height:320px;display:block;float:left;} #image li a:hover{width:450px; } </style> </head> <body> <ul id="image"><li><a id="A1" href="#"></a></li></ul> </body> www.1pw.co.uk/accessmenu I'm looking to assign some access keys that will replicate a mouse hover in the above demo. Eg. Alt+o to open the list and Alt+e to exit the list. I'm sure this is possible with jquery, just not sure how to go about it?
  17. wright67uk
    I would like to use an access key to simulate a mouse hover is this possible? How is this done? www.1pw.co.uk/accessmenu I would like the menu in the link above to show by pressing ALT+M and then hideaway by pressing ALT+E. <style type="text/css"> #A1{background:url(1.jpg) no-repeat;} #image li a{width:30px; height:320px;display:block;float:left;} #image li a:hover{width:450px; } </style> </head> <body> <ul id="image"><li><a id="A1" href="#"></a></li></ul> </body> PS anyone who followed my link.. whats with the black dot ( its not in my image! ) ?
  18. wright67uk
    #gallery-images and #pages have no height property? What end result are you looking for?
  19. wright67uk
    Hi got this sorted now, thankyou for the explanation, it cleared things up for me. http://www.1pw.co.uk/combined I was wondering wether its worth looking into animating the pictures to give them a sliding effect. Would I be best to look towards jquery opposed to css (webkits etc.) furthermore is it even possible using just CSS?
  20. wright67uk
    Firebug shows me that ul Li is affecting my #image elements however I understood the article as saying that id properties were more important than class properties.
  21. wright67uk
    <ul id="image"><li> has a rule: #image... but is actually using the css rule that I had intended for <ul class="blue"><li> which is: ul li... Can anyone take two minutes and explain the best method to assign the right rules ensuring that all elements in ul class = blue only use ; ul ul li ul li a ul li a span ul.blue li a.current, ul.blue li ul.blue li a.current span, ul.blue li span ul.blue li a.current, ul.blue li a:hover ul.blue li a.current span, ul.blue li a:hover span and all elements in ul id = image only use; #image #image li #image li a:hover #A1 #A2 #A3 #A4 #A5 Ive tried to merge two projects and Ive somehow made a hash of it. <link href="reset.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body {margin:0px; padding:0px; background-color:f2f2f2; background-image:url(bgtop1px.jpg); background-repeat:repeat-x;} ul {padding: 5px;margin: 10px 0;list-style: none;background-color: f2f2f2;border-bottom: ;float: left;clear: left;} ul li {float: left;display: inline; /*For ignore double margin in IE6*/margin: 0 10px;} ul li a {text-decoration: none;float:left;color: #666; cursor: pointer; font: 600 11px/22px "Arial", Helvetica, sans-serif;} ul li a span {margin: 0 10px 0 -10px;padding: 1px 8px 5px 18px;position: relative; /*To fix IE6 problem (not displaying)*/float:left;} ul.blue li a.current, ul.blue li {background: url(grey.png) no-repeat top right;color: #0d5f83;} /*STANDARD STATE right side of rectangle*/ ul.blue li a.current span, ul.blue li span {background: url(grey.png) no-repeat top left;} /*STANDARD STATE left side of rectangle*/ ul.blue li a.current, ul.blue li a:hover {background: url(blue.png) no-repeat top right;color: #0d5f83;} /*HOVER STATE right side of rectangle*/ ul.blue li a.current span, ul.blue li a:hover span {background: url(blue.png) no-repeat top left;} /*HOVER STATE left side of rectangle*/ #top {height:345px; width:830px; background-color:#0F0; margin-left:auto; margin-right:auto; margin-top:100px; clear:both;} #buttons {padding-left: 50px; padding-top:30px; padding-left:220px; margin: 0;} #image {height:320px; width:570px; background:url(back.png) no-repeat; list-style:none;} #image li {display:inline;} #image li a{width:30px; height:320px;display:block;float:left;} #image li a:hover{width:450px;} #A1 {background:url(1.jpg) no-repeat;} #A2 {background:url(2.jpg) no-repeat;} #A3 {background:url(3.jpg) no-repeat;} #A4 {background:url(4.jpg) no-repeat;} #A5 {background:url(5.jpg) no-repeat;} </style> </head> <div id="buttons"> <ul class="blue"> <li><a href="#" title="home" ><span>Home</span></a></li> <li><a href="#" title="products"><span>About</span></a></li> <li><a href="#" title="blog"><span>Treatments</span></a></li> <li><a href="#" title="contact"><span>Contact</span></a></li> </ul> </div> <ul id="image"> <li><a id="A1"href=""></a></li><!--is using ul.li from the buttons above --> <li><a id="A2"href=""></a></li> <li><a id="A3"href=""></a></li> <li><a id="A4"href=""></a></li> <li><a id="A5"href=""></a></li> </ul> </div> </body> </html>
  22. wright67uk
    I sorted this by changing the image size to that of its container, and forcing it to behave. Also added good old erics reset.css Thanks ever so much for your help. finished article www.1pw.co.uk/viewer3 would love to know about any cross browser issues. http://cssfreakie.webege.com/ Hover text from your coding service button bleeds at the bottom of the page in my IE, let me know if you want my res and ie version. 100% certain you can sort this lol.
  23. wright67uk
    Post your revised code php html css and a link to your page then we can say where your going wrong. What editor have you got?
  24. wright67uk
    oops I was wrong I have an unwanted gap in IE but not in FF
  25. wright67uk
    Hi I got the desired result in the end. I doctored an image and placed it in #image the right side of the image being the same as that in #A5 and made the left side of this new image transparent. Here's the result; www.1pw.co.uk/viewer3 It seems to work well in IE and FF but would love to know if it works in your browser. Let me know what you think?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.