This is my php code:
echo '<div class="code" rel="$url">$title</div>
<div class="tip">Copy and open site</div>';
the above is a loop's echo result. Namely, there maybe 0->n like the following html structure
<div class="code" rel="....">...</div>
<div class="tip">Copy and open site</div>
Now, supposed there are 6 results like the above, I want to use jQuery to get when I put the mouse hover on the first <div class="code" rel="....">...</div> the only first tip div will show. When I move the mouse out, the div will be hidden.
I think using jQuery alone can't get that effect. There must be some php added to the code, but I don't know how to do that?
$( 'div.code' ).mouseover( function() {
$( this ).next( 'div.tip' ).show();
} );
$( 'div.code' ).mouseout( function() {
$( this ).next( 'div.tip' ).hide();
} );
Edit based on your first comment:
There's a few possibilities:
$( document ).ready( function() { // added document ready for completeness
$( 'div.code' ).mouseover( function() {
$( this ).next( 'div.tip' ).show();
} );
$( 'div.code' ).mouseout( function() {
$( this ).next( 'div.tip' ).hide();
} );
// this is a way after declaring previous stuff:
$( 'div.code' ).trigger( 'mouseout' );
// or simply do:
$( 'div.tip' ).hide();
} );
You'll need to refer to the tip DIV more specifically than just a class selector.
Something like...
<div id="link1" class="code" rel="....">...</div>
<div id="tip1" class="tip">Copy and open site</div>
And then have the hover property of #link1 point to your JQuery display code.
Related
So I've got this little accordion menu I made using jQuery and php.
It works well apart from the fact that when I click hide all items it opens everything then closes it, when show all is clicked it hides everything then shows it.
I want if i press hide all to hide it straight away without showing everything first and the other way around when show all is clicked.
I'm using count() to count the items in the menu then incrementing it by one when the function ends.
Anyway, here's the code:
jQuery:
<script type="text/javascript">
$ = jQuery;
$( document ).ready(function () {
$( "#heading_<?php echo $count; ?>, .personal-lessons-show-all, .personal-lessons-hide-all" ).on("click", function () {
$( "#lessons_<?php echo $count; ?>" ).slideToggle().css( "display", "block" );
$( "body" ).css( "background-color", "#eee" );
$( ".right-purple-background" ).css( "height", "1124px" );
});
$( ".personal-lessons-show-all" ).on( "click", function () {
$( "#lessons_<?php echo $count; ?>" ).slideDown();
$( ".personal-lessons-hide-all" ).show();
$( "body" ).css( "background-color", "#eee" );
$( ".right-purple-background" ).css( "height", "1124px" );
});
$( ".personal-lessons-hide-all" ).on( "click", function () {
$( "#lessons_<?php echo $count; ?>" ).slideUp();
$( ".personal-lessons-hide-all" ).hide();
$( "body" ).css( "background-color", "white" );
$( ".right-purple-background" ).css( "height", "1200px" );
});
$( ".bordered-title" ).on( "hover", function () {
$( this ).css( "cursor", "pointer" );
});
});
</script>
And the php:
<?php
// Loop through all of the lesson categories
$count = 0;
foreach($lessons as $key => $val){
$count++;
// Get personal lessons for logged in user
$personal_lessons = get_user_meta(get_current_user_id(), 'personal-lessons', true);
$yes_to_all = false;
if(empty($personal_lessons[$_GET['course']]) || !$personal_lessons[$_GET['course']]){
$yes_to_all = true;
}
$category_name = $wpdb->get_row("SELECT name FROM mdl_course_categories WHERE id = '$key'");
?>
<p class="bordered-title" id="heading_<?php echo $count; ?>"><?php echo $category_name->name; ?></p>
<div class="table-responsive">
<table id="lessons_<?php echo $count; ?>" class="lessonsTable table-responsive">
<?php
I have a bit of an issue. I am trying to do a while loop in a database which will load information about each person. In the field I want it to load a contact form but hide it on initial load. I have this working My problem is when I go to click the button it displays all the Div's when I only want it to display that div the button was clicked on. Below is just a simple example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<?php
$x = 1;
while($x <= 5) {
echo '<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>';
$x++;
}
?>
<script>
$( document ).ready(function() {
$( ".Test_name" ).hide();
$('.Click_ME').html('TEST');
$( ".Click_ME" ).click(function() {
$( ".Test_name" ).show();
});
});
</script>
The jquery selector should be point to the respective div on click of button.
Inside click event using $(".Click_ME").index(this) we can able to find index of clicked button's index and using it div can show using $( ".Test_name" ).eq($(".Click_ME").index(this)).show();.
Please check below snippet.
$( document ).ready(function() {
$( ".Test_name" ).hide();
$( ".Click_ME" ).on('click',function() {
//$(".Click_ME").index(this) will find the index of clicked button and based on that index div can show/hide.
$( ".Test_name" ).eq($(".Click_ME").index(this)).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>
<br/>
<br/>
<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>
folow this simple steps.
In the div include the style display:none
<div style='display:none'>
// you all php data here
</div>
on click remove the style
$( ".Click_ME" ).click(function() {
$(".Test_name").css('display','block');
});
replace $( ".Test_name" ).show(); with $(this).prevAll('.Test_name').first();
Is it possible to have a jquery mouseover in a html tag?
for(x=1; isset($_COOKIE["link$x"]); $x++)
echo <div id="'.$x.'" onLoad="myfunction('.$x.')">
}
Like this example above but with "mouseenter" insted of "onLoad" ?
for(x=1; isset($_COOKIE["link$x"]); $x++)
echo <div id="'.$x.'" OnMouseEnter="myfunction('.$x.')">
}
and then in javascript
function myfunction(which){
document.getElementById(which).style.backgroundColor = red;
}
As you mention in your comment, that you have multiple divs that should be fired on mouseenter, in this case you have to use "class" instead of "id"
<div class="myDiv">container1</div>
<div class="myDiv">container2</div>
<div class="myDiv">container3</div>
and in your jQuery code:
$( ".myDiv" ).mouseenter(function() {
$( this ).text( "mouse enter" );
})
$( ".myDiv" ).mouseleave(function() {
$( this ).text( "mouse leave" );
});
HTML Tag
<div id="myDiv"></div>
and in your jQuery code:
$( "#myDiv" ).mouseenter(function() {
$( this ).text( "mouse enter" );
})
$( "#myDiv" ).mouseleave(function() {
$( this ).text( "mouse leave" );
});
Let's say that in a document I have a div and a button that will show the div:
<div id="dvExternal" style="display: none;">
</div>
<button type="button" id="btnShow">
<span>Show</span>
</button>
and a jquery that commands it to show:
$("#btnShow").click(function(){
$("#dvExternal").css("display","block");
$("#dvExternal").load("whattheitsnotworking.php");
});
and that page contains jquery functions, php, iframe etc.
The problem is when it loads on the div the jquery on that page isn't working.
Thanks in advance :)
The page that I was trying to load in the div contains(for example):
<script type="text/javascript">
$(document).ready(function(e)){
$("#inputDate").val("<?php echo date("Y"); ?>");
});
</script>
This script doesn't load or work.
Try to use live function of jquery, it will help you...
$("#btnShow").live("click",function(){
$("#dvExternal").css("display","block");
$("#dvExternal").load("whattheitsnotworking.php");
});
Make sure you have
<script src="http://code.jquery.com/jquery-1.10.0.min.js">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
in the parent page head
I have it working # http://www.damienkeitel.com/pr.php
<script type="text/javascript">
$( document ).ready( function( e )){
$( "#inputDate" ).val( "<?php echo date('Y'); ?>" );
}
</script>
should be
<script type="text/javascript">
$( document ).ready( function( e ){
$( "#inputDate" ).val();
});
</script>
jQuery .val() is only to get a value of an element.
To set a value you can use this method.
$( "#inputDate" ).attr( "value", "<?php echo date('Y'); ?>" );
you had one to many ) after function(e) and also didnt close off the function with );
On my webpage, I have a few boxes one below the other, on the right side. Each box has a '+' and '-' button which maximizes/minimizes to the specified size, similar to that in portlets. But, for some reason, it is not working as it is suppose to.
Here is the code for '-' button:
<script type="text/javascript">
$(function() {
<?php for($i=0;$i<count($modules);$i++) : ?>
$( "#minusbtn<?=$modules[$i]["title"]?>").click(
function() {
$( "#effect<?=$modules[$i] ["title"]?>").animate({
height: 35,
}, "slow" );
<?php $count=0; $top=0; ?>
<?php for($j=$i;$j<count($modules);$j++): ?>
<?php if($i==$j) continue; ?>
$( "#effect<?=$modules[$j]["title"]?>" ).animate({
top: <?=($top)?>,
}, "slow" );
<?php $count++; $top = (210*$count); ?>
<?php endfor; ?>
});
Please help!
All it is that makes the boxes is this:
$( ".portlet-header" ).click(function() {
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});
As seen here: http://jsfiddle.net/ndHK4/.