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());
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());
});
Iam trying to have 3 buttons, and when i press one, it will show the content of a php file. This is what i have done so far:
In the main Html file:
<div class="buttons">
<a class="showSingle" target="1">Logg</a>
<a class="showSingle" target="2">Saker</a>
<a class="showSingle" target="3">Rediger Kunde</a>
</div>
<div id="div1" class="targetDiv"><?php include 'php/loggselect.php'; ?></div>
<div id="div2" class="targetDiv">Saker</div>
<div id="div3" class="targetDiv">Rediger </div>
And later in the same file:
<script type="text/javascript">
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
</script>
Have two problems: When I reload the page, all 3 divs are showing, I have to press one of the "buttons" to only show the content of that spesific button.
The next and biggest problem is that this is working fine as long as it is plain text. But when I use <?php include 'php/loggselect.php'; ?> it will no longer show / hide. The php file should display a table with search result from my database. But it does not work when the php only contains `
echo 'testing';
?>` either. Any soulution?
Thanks!
Problem #1: You can do,
CSS: .hiddenDiv {display:none;}
And add this class to every div
$(function(){
$(".showSingle").eq(0).trigger("click");
});
Problem #2: Do
var _var1 = "variableone";
$("#div1").load('php/loggselect.php?v1='+_var1+'&v2='+_var1);
Don't do <?php ... ?>
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 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>
I have this code:
$.getJSON("Featured/getEvents",
function(data){
$.each(data.events, function(i,event){
var title = event.title.substr(0,20);
$("#title-"+i).text("Text");
if ( i == 4 ) return false;
});
});
I am doing this in conjuction with a php loop to render a div 5 times, I want to place my content into the ID's from the JSON using var and the .text(), but it is not working, How do I get a var, in this case title into the jquery text() so it can place it in the corresponding div?
This is the corresponding php(partial) that this connects to:
<?php for($i = 0; $i <= 4; $i++)
{ ?>
<div id="event-item-<?= $i?>" class="event">
<div class="column-left">
<div class="title"><h3></h3></div>
This is the rendered version:
<div id="event-item-0" class="event">
<div class="column-left">
<div class="title"><h3></h3></div>
<div class="inner-left">
<img src="http://philly.cities2night.com/event/85808/image_original" class="image" width="133" height="100">
<p class="author">Posted by: <br> Brendan M. (22 Events)</p>
</div>
<div class="inner-middle">
<p class="description" id="description-0"></p>
<p class="notify"><img src="images/recommened_ico.png" alt="Recommened Event" width="98" height="21"></p>
<p class="links">
<!-- AddThis Button BEGIN -->
<img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="Bookmark and Share" style="border: 0pt none ;" width="125" height="16"><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=philly2night"></script>
<!-- AddThis Button END -->
View Event</p>
</div>
</div>
<div class="column-right">
<ul id="event-options">
<li class="total-attending"><span>502Attending</span></li>
<li class="rsvp"><span>RSVP</span></li>
<li id="like" class="notlike"><span>(3) Likes <br><span class="message">Do You Like it?</span></span></li>
<li class="comment"><span>Comments (200)</span></li>
<li class="location"><span>Location Name</span></li>
</ul>
</div>
</div>
...
</div>
It should be as simple as referencing the variable.
$("#title-"+i).text( title );
or, if your title includes mark up,
$("#title-"+i).html( title );
If this doesn't work, make sure that you aren't getting any javascript errors that prevent the code from running.
EDIT: This may or may not be related, but I would avoid using event as a variable name. Too easy to confuse with the window.event object and it may cause other problems. Generally, I'd use evt in this case.
Other possibilities: You aren't running the getJSON method after the document is done loading or the method isn't relative to the current page. If the simple things don't seem to be getting you anywhere, you may try using Firefox/Firebug to step through the code and see what it is doing. My simple example with your mark up and just using jQuery to set the text of the anchor worked fine so I don't think the problem is in the code where the text is being set.
$(function() {
$.getJSON("/Featured/getEvents",
function(data){
$.each(data.events, function(i,evt){
var title = evt.title.substr(0,20);
$("#title-"+i).text(title);
if ( i == 4 ) return false;
});
});
});
You want to use .html(val).
Edit: Actually, .text(val) will place the text inside the element as-is. Using .html(val) will let any HTML you are adding render appropriately.
Did you try this, using title instead of "Text"?
$.getJSON("Featured/getEvents", function(data){
$.each(data.events, function(i,event){
var title = event.title.substr(0,20);
$("#title-"+i).text(title);
if ( i == 4 ) return false;
});
});