I want create a list of button, for example a number X mini-balls, based on a number X of divs into a container. I want this:
∞ ∞ ∞ ∞
based on a number of divs.
and each of this button has a position of each div (with animation scroller) and if I click one of items I'll go to this position linked to div.
For example:
<div id="scroller">
<div id="content">number1</div>
<div id="content">number2</div>
<div id="content">number3</div>
</div>
And I've:
<ul>
<li><div id="ball"></div></li>
<li><div id="ball"></div></li>
<li><div id="ball"></div></li>
</ul>
So if I click on third "mini-ball", I'll go to position of div "number3".
I hope that you understand!
You cannot give same Ids to different elements!!
basically you need to show a specific division upon click of a specific button. There are many ways to go about this.
All of these many methods, would require you to do one thing, detect the particular button click and deduce the div to be shown
Below am showing you world's simplest sample (for the sake of it)..it should give you an idea:
respective html:
<body >
<ul>
<li><div id="ball1" data-target="content1">button 1</div></li>
<li><div id="ball2" data-target="content2">button 2</div></li>
<li><div id="ball3" data-target="content3">button 3</div></li>
</ul>
<div id="scroller">
<div id="content1" class="number">number1</div>
<div id="content2" class="number">number2</div>
<div id="content3" class="number">number3</div>
</div>
</body>
respective jquery code:
<script type='text/javascript'>
$(document).ready(function(){
$('ul').find('li').find('div').click(function(){
var target = $(this).attr('data-target');
$('#'+target).slideToggle(1000);
});
});
</script>
respective style:
<style>
.number
{
display:none;
}
</style>
Related
I am really tired for searching this can someone help me... help will be really appreciate.
My question is Suppose I have one div element eg.
<div name="div1" class="demo">
and I have some links in that div so my code will something like:
<div name="div1" class="demo">
<ul>
<li> <a>Example1</a></li>
<li> <a> Example2</a></li>
</div>
and I have another div element which is
<div name="div2" class="demo2"> </div>
and I Now what i want, when i will click the link in first div eg. Example1.. I want the response of that link into div no 2 . IE on the another div which is
<div name="div2" class="demo2">
This is provided in html, for instance
<div id="name">
<ul>
<li> <a href="yourpage.html#name2" > Example1 </a> </li>
<li> <a> Example2 </a></li>
</ul>
</div>
Then in your reference div ensure you have given it the referring id, for instance
<div id="name2" class="demo2"> </div>
When you click on first link it should bring up the div with the id requested. Of course styling effects such as z-index can be added.
To be frank, you question is not understandable, However I am relating "Response" to "HTML" and "Link" to "Element".
So, Onclick of demo the content of demo will be moved to demo2.
Use JQUERY,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(".demo").on("click", function(e){
$(".demo2").html($(this).html());
});
I created a menu with links (#) which aims to show & hide a div thanks to the onclick attribute.
For example the link "home" can hide/show the div "contentHome", the link "contact" can hide/show the div "contentContact".
The problem I have is that the container div "content" includes the div "contentHome" and "contentContact" when i click on the 2 links one time...
Here is a part of my code :
<li><a href="#" onclick="toggle('contentHome');" ><?php echo $lang['MENU_ACCUEIL'];?>
<div id="content">
<div id="contentHome">
<img src="Images/photo.jpg" class="imgphoto" alt="Simplepic" />
<?php echo $lang['TEXTE_ACCUEIL'];?>
<img src="Images/work.png" class="imgwork" height="100" width="100" alt="Travaux" />
<?php echo $lang['TEXTE_SOON'];?>
</div>
<div id="contentContact">
...
</div>
</div>
The position is static, I can't put a z-index and when I put display:none;, divs don't want to load.
What do you think ? I just wanted to create a dynamic menu with div but the php includes makes me struggle...
Here i've created some example of toggle with divs.
<li>Toggle Red</li>
<li>Toggle Blue</li>
<div id="content">
<div class="toggled-item" id="contentHome">
<div style="width:200px; background-color:#f00; height:200px;"></div>
</div>
<div class="toggled-item" id="contentContact">
<div style="width:200px; background-color:#00f; height:200px;"> </div>
</div>
</div>
<script>
$(document).ready(function(){
$("#lnk_contentHome, #lnk_contentContact").click(function(){
$(".toggled-item").hide();
var target = $(this).attr("id").split("_")[1];
$("#" + target).toggle();
});
});
</script>
https://jsfiddle.net/ow7dd12f/5/
Hope helps.
I want to relate the width of two elements, the first is a simple div, the second is a span.
<div id="wb_Name_To_Menu" style="position:absolute;left:768px;top:20px;width:171px;height:18px;z-index:4;">
<span id="sp_Name_To_Menu" style="color:#FF0000;font-family:Arial;font-size:16px;">Love Me!</span></div>
<div id="Layer_to_mainu" style="visibility: hidden;position:absolute;text-align:left;left:772px;top:22px;width:132px;height:135px;z-index:132;" title="">
<div id="wb_main_mainu" style="position:absolute;left:8px;top:9px;width:123px;height:28px;z-index:1128;padding:0;">
<div id="main_mainu">
<ul style="display:none;">
<li><span></span><span id="id_full_name_from_main_menu">love Meeeeee</span>
<ul>
<li><span></span><span>Account Sitting</span></li>
<li><span></span><span>Help</span></li>
<li><span></span><span>Log Out</span></li>
</ul>
</li>
</ul>
</div>
in JavaScript:
$(document).ready(function(){
$("#wb_Name_To_Menu").hover(function(){
$("#Layer_to_mainu").css("visibility","visible");
$("#Layer_to_mainu").css("width",$("#id_full_name_from_main_menu").width()+"px");
});
});
$(document).ready(function(){
$("#Layer_to_mainu").mouseleave(function(){
$("#Layer_to_mainu").css("visibility","hidden");
});
});
it doesn't work! and I know the cause: it is caused by $("#id_full_name_from_main_menu").width() which results in a null value!
$("#id_full_name_from_main_menu").width() returns 0 because its ancestor <ul> has display:none set. To read the width you might want to just remove that attribute, or you could temporarily change it in the js, depending on what you're trying to do
$(document).ready(function(){
$("#wb_Name_To_Menu").hover(function(){
$("#Layer_to_mainu").css("visibility","visible");
$("#main_mainu > ul").css("display","block");
$("#Layer_to_mainu").css("width",$("#id_full_name_from_main_menu").width()+"px");
$("#main_mainu > ul").css("display","none");
});
That won't display your text but it will update the width of #id_full_name_from_main_menu,
you would need to remove the display:none to see your text appear.
If you remove +"px" On line 4 of the script you provided it seems to work.
$("#Layer_to_mainu").css("width",$("#id_full_name_from_main_menu").width());
Im trying to make a left side navigation that slides down with sub categories when you click on one of the links.
I've got it to work for the top link only but the others dont work.
In my header file I have some jquery script like this:
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
in my HTML/PHP i have this code:
<div id="left-prod-nav">
<ul>
<li class="top">Product Categories</li>
<?for($i = 0; $i < $count; $i++)
{?>
<div id="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><?=$result[$i]['categoryName']?></li> </div>
<div id="panel">Hello world!</div>
<?}?>
</ul>
<div class="clear"> </div>
</div>
so the navigation is there...and when I click on the top one, the others slide down so you can see the sub categories for the one I clicked.
however if I click any of the others nothing happens.
has anyone had this problem before or know how to solve it looking at my code?
Thanks
I can assume you are trying to accomplish something like this: http://jsfiddle.net/QQRy8/
$(".flip").click(function(){
$(this).next(".panel").slideToggle("slow");
});
I changed your jQuery to use classes, you should change your PHP to give each div a class name instead of an ID (ID's must be unique!)
This answer is based off this HTML:
<div class="flip">
<li>
cool
</li>
</div>
<div class="panel" style="display: none;">Hello world!</div>
I'm an ammature when it comes to webdesigning, I sort of ctrl+c > ctrl+v all of the time trying to learn.
At the moment I'm making a webapplication for selecting cushions on a couch.
I created a page where you can click on a color to see the cushions in that specific color, but I would like to change the color of the base of the couch also.
In short: I would like to place 2 png images on top of each other and be able to change them individually by clicking on colors.
My code for now:
<body>
<div id="page">
<div id="gallery">
<div id="panel"><img id="largeImage" src="images/image_01_large.png"/>
<div id="thumbs">
<img src="images/image_01_thumb.png" alt="Lime Green"/>
<img src="images/image_02_thumb.png" alt="Burgundy"/>
<img src="images/image_03_thumb.png" alt="Cobalt Blue"/>
</div>
<script>
$('#thumbs').delegate('img', 'click', function () {
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
});