|
HTML - Newbie Help With Toggle Class On Div's
Hi,
I'm trying to develop a simple gallery of container, that change class when clicked. I'm using bullets to create the containers, and the .toggleClass() to change the state of the container. The desired effect can be seen he http://gabrieltomescu.com/quote/template.html Here's my current HTML: HTML Code: <div id="main">
<ul class="gallery">
<li>
<a id="template1" href="#select" class="thumb"><span><img src="img/templates/01.jpg" alt="PAPER" /></span></a>
<div class="select"><span>SELECT</span></div>
<h2><a href="#">PAPER</a></h2>
</li>
<li>
<a id="template2" href="#select" class="thumb"><span><img src="img/templates/02.png" alt="WOOD" /></span></a>
<div class="select"><span>SELECT</span></div>
<h2><a href="#">WOOD</a></h2>
</li>
</ul><!-- /gallery -->
</div><!-- /main -->
I also have the javascript running to toggle the div class: Code: <script type="text/javascript">
$("gallery li").click(function(){
$(this).toggleClass("selected");
});
</script>
And also the CSS: HTML Code: ul.gallery {width: 550px; list-style: none; margin: 0; padding: 0;}
ul.gallery li {float: left; margin: 10px; padding: 0; text-align: center; border: 1px solid #ccc; position: relative;display: inline; -moz-box-shadow: 0px 0px 10px #cbcbcb; -webkit-box-shadow: 0px 0px 10px #cbcbcb; background: #FFF;}
ul.gallery li a.thumb {width: 150px; height: 150px; padding: 5px; border-bottom: 1px solid #ccc; cursor: pointer; z-index: 99;}
ul.gallery li .select { position: absolute; left: 0px; top: 0px; padding: 0; width: 160px; height: 160px; display: none; background: #000; font-size: 1.2em; filter: alpha(opacity=50); opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}
ul.gallery li .selected { position: absolute; left: 0px; top: 0px; padding: 0; width: 160px; height: 160px; display: none; background: ##0066FF; font-size: 1.2em; filter: alpha(opacity=50); opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}
ul.gallery li:hover .select {display: block; cursor: pointer;}
ul.gallery li .select span {font-size: 20px; font-weight: bold; color: #FFF; text-transform: uppercase; padding-top: 70px;}
ul.gallery li span {width: 150px; height: 150px; overflow: hidden; display: block;}
ul.gallery li h2 {font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px; background: #f0f0f0; border-top: 1px solid #fff;}
ul.gallery li a {text-decoration: none; color: #777; display: block;}
Any help would be highly appreciated!!! Thanks! Similar TutorialsHow can I toggle the background-color of a div onclick? For example, I have a div that has a background color of #EEE. I would like this to change to #2E6DCC when I click on the div, and change back to #EEE when I click again. I am having difficulty though, as I seem to be only able to change the #EEE to #2E6DCC, and not change it back onclick. Any kind of help would be very appreciated. Here is my JavaScript : Code: function colortog(ele) {
if (document.getElementById(ele).style.backgroundColor = "#EEE") {
document.getElementById(ele).style.backgroundColor = "#2E6DCC";
}
else if (document.getElementById(ele).style.backgroundColor = "#2E6DCC") {
document.getElementById(ele).style.backgroundColor = "#EEE";
}
else {
document.getElementById(ele).style.backgroundColor = '#EEE';
}
}
i currently have a javascript to hide and unhide content http://www.danish.wep.dk/film.html HTML Code: <script type="text/javascript">
function toggleDiv()
{
if (document.getElementById("myDivBox").style.display == "block")
{
document.getElementById("myDivBox").style.display = "none";
}
else
{
document.getElementById("myDivBox").style.display = "block";
}
}
</script>
HTML Code: <input type="button" value="PK" onclick="toggleDiv()">
<div id="myDivBox" align="center" style="display:none;">
<input type="button" value="Zamorak Godsword lured by #Danish" onclick="toggleDiv()">
<div id="myDivBox2" align="center" style="display:none;">
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/CzV_HAwOSwA&hl=en_US&fs=1&"></param><param
name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed src="http://www.youtube.com/v/CzV_HAwOSwA&hl=en_US&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="425" height="344"></embed></object>
</div>
....
..
.
the problem is that i would like an additional hide funktion, but this script dosn't seem to support that, so basicly i would like the category to be called PK and then it should be divided again into groups of 1 video (named the same as the video) _________ im also open for other suggestions So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. Hy I'm new here and new to everything that's related to webdesign and coding so maybe I have silly questions but that's it!,and also sorry for my english - hope you will understand what I have to say. I work on this ImageCube http://keith-wood.name/imageCube.html but I would like to make it like this one http://www.cancan.ro/ with previous/next buttons and with thumbscroller. I know my question is related also to jquery but I will be pleased with the answer regarding only html too. I succeeded to make both previous/next buttons and the thumbscroller to work somehow but I can only make them functioning properly one at a time - I can't make them to function properly both in the same time. I know to make this things work only like this so if you know a better way to do it just tell me. Whatever values do I put either in html or javascript can't seems to work like it should. For example in this case like in below all thumbs and both directionButtons get the first value from document in this case "0" which is uluru.jpg.So,in another words (in this case from below) whenever I click either on whichever of the thumbs or on whichever of the directionButtons the Cube repeatedly rotate the Uluru image. I tried all kinds of variants -to put different values but in neither cases don't work well. So if you can help me I would much appreciate it,and if you have other ideas please give me the entire code because like I said I'm very new to all in this field. HTML Code: <body>
<div id="directionCube" class="cube">
<img src="img/uluru.jpg" >
<img src="img/islands.jpg" >
<img src="img/gorge.jpg" >
</div>
<div id="thumbs">
<input id="direction" value="left" type="hidden"> <input id="next" value="0" type="hidden" /> <img src="1_thumb.jpg">
<input id="direction" value="left" type="hidden"> <input id="next" value="1" type="hidden" /> <img src="2_thumb.jpg">
<input id="direction" value="left" type="hidden"> <input id="next" value="2" type="hidden" /> <img src="3_thumb.jpg">
</div>
<script type="text/javascript">
$('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});
$('#thumbs').click(function() {
var cube = $('#directionCube');
var next = parseInt($('#next') .val(), 10);
cube.imagecube('change', {direction: $('#direction') .val()}).
imagecube('rotate', next, function() {
$('#current').text($(cube.imagecube('current')).attr('title'));
});
});
</script>
<input id="direction" value="right" type="hidden"> <input id="next" value="" type="hidden">
<img id="directionButtonRIGHT" src="control_right.jpg">
<script type="text/javascript">
$('#directionButtonRIGHT').click(function() {
var cube = $('#directionCube');
var next = parseInt($('#next').val(), 10);
cube.imagecube('change', {direction: 'right' , selection: 'forward'}).
imagecube('rotate', next, function() {
$('#current').text($(cube.imagecube('current')).attr('title'));
});
});
</script>
<input id="direction" value="right" type="hidden"> <input id="next" value="" type="hidden">
<img id="directionButtonLEFT" src="control_left.jpg">
<script type="text/javascript">
$('#directionButtonLEFT').click(function() {
var cube = $('#directionCube');
var next = parseInt($('#next').val(), 10);
cube.imagecube('change', {direction: 'left', selection: 'backward'}).
imagecube('rotate', next, function() {
$('#current').text($(cube.imagecube('current')).attr('title'));
});
});
</script>
</body>
Hello, I recently started making websites and I need a little help. I'm using adobe dream weaver cs3 and am having trouble with a few things. First, I am wanting to use a conveyor belt with images sort of thing, so I found one on the internet and am using that..but now I want to put it in front of a picture but it's not letting me..here's a picture of my screen.. http://img72.imageshack.us/img72/6222/screenvf4.jpg So that box of pictures I want to be right after the "Bayside Baptist" Any help would be appreciated..I've never posted on forums before so I don't know if you would need to see the XHTML code but if you do just ask Thanks! Shane hi guys, i have just learned HTML and at first i thought it is easy but it frustates sometimes when i can't find the solution, here is the code of a page i am designing, Quote: <HTML><HEAD><TITLE></TITLE> <META http-equiv=Content-Type content="text/html; charset=UTF-8"> <META content="MSHTML 6.00.5730.13" name=GENERATOR> <STYLE type=text/css>BODY { FONT-FAMILY: verdana, arial, sans-serif } </STYLE> <LINK media=screen href="Cybus X_files/template_css.css" type=text/css rel=stylesheet></HEAD> <BODY> <TABLE cellSpacing=0 cellPadding=0 width="80%" align=center border=0> <TBODY> <TR> <TD class=s5_tl></TD> <TD class=s5_tm></TD> <TD class=s5_tr></TD></TR> <TR> <TD class=s5_ml></TD> <TD class=s5_mm></TD> <TD class=s5_mr></TD></TR></TBODY></TABLE></BODY></HTML> as far as first row is concerns it seems ok but as soon as i add second row the output becomes wierd.here is the snapshot, here comes the css code, Quote: .s5_tl { height:20px; width:24px; background:url(../images/s5_tl.png) no-repeat top left; float:left; } .s5_tm { height:20px; background:url(../images/s5_tm.png) repeat-x; float:left; } .s5_tr { height:20px; width:24px; background:url(../images/s5_tr.png) no-repeat top right; float:left; } .s5_ml { width:24px; background:url(../images/s5_ml.png) repeat-y top left; float:left; padding-left:24px; } .s5_mm { background:url(../images/s5_mm.png); float:left; } .s5_mr { width:24px; background:url(../images/s5_mr.png) repeat-y top right; float:left; padding-right:24px; } and here are the images which im using as a background, => s5_tl.png => s5_tm.png => s5_tr.png => s5_ml.png => s5_mm.png = s5_mr.png plz guys help me here i can't find what's going wrong with this!!!to see the original site of which im copying the basic design is http://cybusx.in/ Html email does not display image background in Outlook, Gmail, Yahoo and MSN, i am using PHP code.. the images will not appear when sitting it as a back ground in the TD. but i am sure with my file path, it will only display if being coded as <img src=images.jpg> Hi all, I'm new to this forum and to HTML and i have a question when i create a button in HTML how do i: A. run a function once the button is clicked on? (i want to run some exe file from my machine) B. locate the button on a specif place on the screen (ex, up,down,sides) any where on the screen an example whould be great. Thanks. Hi All Been a reader of this site a while now and have found the info very helpful. Currently designing my own site to sell classic cars and really like the way a celebrity site shows its images. ANy idea how this is done? Heres the link... oops-we're a family-friendly place Thanks in advance Al hello all i am so happy to have found your site! I have a domain and website hosting set up with my internet provider. i downloaded filezilla. i created my website using microsoft publisher. when i try to upload it using the filezilla, i get 550 access denied. help, what am i missing???? thanks! Hi Len here from Cape Town,South Africa. Done a lot of websites, using Netobjects Fusion, hence no coding.(Damn!) My own website www.2busycamping.co.za has a database which I want to change to PHP/MySQL based but battling with the data entry form. Any help would be appreciated. The drop down box (Province/Country) does not forward the entered data when selected and submitted. The other fields do! PS. this is code I have copied and pasted form bits and pieces I have found, so apologies in advance! Code follows: <form action="welcome3.php" method="get"> <FONT COLOR='#6633FF' SIZE='4'> <label><label><br /> <label>Select the fields that apply and click on FIND RESORTS.</label><br /> <label><label><br /> <select> <option value=""></option> <option value="">Southern Africa</option> <option value="">Eastern Cape</option> <option value="">Free State</option> <option value="">Gauteng</option> <option value="">Kwazulu-Natal</option> <option value="">Limpopo</option> <option value="">Mpumalanga</option> <option value="">North West</option> <option value="">Northern Cape</option> <option value="">Western Cape</option> <option value="">Bostwana</option> <option value="">Malawi</option> <option value="">Mozambique</option> <option value="">Namibia</option> <option value="">Zimbabwe</option> </select> <label>Province/Country<label><br /> <label><label><br /> <input type ="text" name = "Resort_name" </label> Resort Name (Can be left blank) : <label><br /> <label><label><br /> <input type ="text" name = "Route" </label> Route (Can be left blank) : <label><br /> <label><label><br /> <input type ="text" name = "Closest_town" <label> Closest Town (Can be left blank) : </label><br /> <label><label><br /> <input type ="text" name = "Pets_allowed" <label> Pets Allowed (Can be left blank) : </label><br /> <label><label><br /> <input type ="text" name = "Day_visitors_allowed" <label> Day Visitors Allowed (Can be left blank) : </label><br /> <label><label><br /> <input type ="text" name = "Have_conference" <label> Has conference facilities (Can be left blank) : </label><br /> <label><label><br /> <input type ="submit" value="FIND" /> </form> Thanks Len fixed!sdasffdf deeletete Hi everyone, i have been getting errors on validator w3 i have tried every thing i can to sort this problem out but im now lost for ideas. Here is the code i have errors on, if you need any more info please let me know <script language='javascript'>var sp_key = 'd6nz91881gggks48';</script><script type='text/javascript' src='http://www.spottt.com/js/spottt.js'></script><noscript><style type="text/css"> table.spottt_tb, table.spottt_tb tr, table.spottt_tb td, table.spottt_tb a, table.spottt_tb tr a img { margin:0; padding:0; border:none; background:none; position:static; text-decoration:none; display:block; width:125px; vertical-align:top;} .spottt_thumb, .spottt_thumb img, .spottt_thumb a, .spottt_thumb td { height:125px; } .spottt_label, .spottt_label img, .spottt_label a, .spottt_label td { height:21px;}</style><table cellspacing="0px" class="spottt_tb" id="sp_code_table_d6nz91881gggks48"><tr class="spottt_thumb"><td><a href="http://click.spottt.com/sp_click_d6nz91881gggks48.php" target="_top"><img src="http://view.spottt.com/sp_image_d6nz91881gggks48.jpg" border="0" alt="Spottt"></a></td></tr><tr class="spottt_label"><td><a href="http://home.spottt.com/sp_index_d6nz91881gggks48.php"><img src="http://view.spottt.com/sp_label_d6nz91881gggks48.jpg" border="0" alt="Spottt"></a></td></tr></table></noscript> Hi All, Wondered if I could get some help. I have wrote a simple HTML script to create a simple Pro-Forma for cusotmers to fill out a few things. I also have a SUBMIT button that what I want it to do when clicked is automatically send the data from the form to an email address. So far I have managed to get the SUBMIT button to create an email with the email address in the to and the data in the subject. However I want it to auto send without the cusotmer seeing and also when the data is copied into the email it is just all linked together seperated by & signs. I am new to this and cant seem to get it to automatically send and wondered if anyone could help Thanks in advance Hello, i'm a business manager for 2 different up and coming businesses within the UK. On one of our sites we have widgets we are putting on the site displaying news from a few different organisations within the environmental sector. I have 5 or 6 widgets in total I am using, and when I put the widget codes into my boxes on the page I wish to have the information displayed on the website, they appear vertically on top of each other, meaning that the page becomes very long with the widgets on there. What code should I use to get the HTML code to know that I want the widgets to sit next to each rather than in a line down the page? I hope you understand what I mean, things involving websites are not my primary business activities so my knowledge of terminology is a bit lacking. Regards, Sean Hi folks. I need some help with an HTML site I am trying to make, so please do me a favour and hear me out. I should add that I know some simple HTML stuff (ie. I can make simple pages no sweat), but am pretty quick on the uptake. What I am trying to do is make a HTML page to keep track of orders for my small business. The layout is pretty simple- I need to make a form where I can enter orders as they come in (simple info- cutomer name, order size, that kind of thing), and then have the form publish the order into a queue/chart of some sort. Then, I need to be able to have that published order queue somehow accessible/editable so that once an employee has finished an order, they can confirm that the order is indeed finished, as well as include notes about when it was finished, where the order is in waiting in the warehouse, etc. Finally, a page essentially the same as above, but this time to confirm shipping with notes about shipping company/time, etc. Hopefully this model came out clear, and someone can point me in the right direction of how to go about getting this started. It by no means has to be pretty- just functional. Can someone give me a brief tutorial about how to make the forms and have them publish into some kind of master queue? hello all im all new to this HTML so hopefully everyone can understand me im just playing around with HTML at the moment using notepad to learn whats what but i cant find a way of putting images or tex in the middle of the screen by it self it all just stays on the left handside? can anyone explain or give me the code for it please. also if anyone knows of any good starting books or software to help me on my HTML quest cheers I want to make my own web site for a computer game that I play. It will basically have custom made content for download for other users. I have an idea of how I want the site to look but I have no idea how to take it from Photoshop and actually make it my web site. I looked at the tutorials on here but I must be really computer dumb because I cant for the life of me figure it out. Is there anyone here who could help me maybe if i show them what I have created?? I cant afford for someone to make it for me but maybe someone would be nice enough to help me out?? Thanks Elaina Hi there, Im currently making a website and im afraid im pretty new to this. I am making a fairly simple site >> http://www.monk3d.com/healthcarebed3.html If you download the page, you will see I have placed the logo, links, and footers, however I dont have a space for the actual content! Im probably being stupid, but im not sure how to add a new section. I attached a diagram where the blue box shows where I need the content. I hope this is explained properly. kind regards, Rob Ok, so here's what I'd like. Any help would be greatly appreciated. I would like a url to load in 1 I would like a constant, stay on top, stay at top, follow your scroll, area where 2 is. I would like to be able to place content where 2 is. 3, I would like to be able to edit the length of the content area. 5$ via paypal for first person who helps. Thanks again. |
|||||||