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/.
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
Hi I am using a framework called CodeIgniter and its a sample of MVC. I need a popup box where it will display the subvalues of an application however my dialog box is not working everytime I echo it. but you see i need to loop the dialog box for different values. my code is below
<?php
foreach($people as $row){
echo"<div id='dialog' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener'>".$row->app_name."</button>";}
?>
My javascrip code is fro jquery
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
Use event delegation
$(document).on("click" , "#opener" ,function() {
$( "#dialog" ).dialog( "open" );
});
Update the code as below:
<?php
$i = 1;
foreach($people as $row){
echo"<div id='dialog". $i."' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener". $i."'>".$row->app_name."</button>";
?>
<script>
$(function() {
$( "#dialog<?php echo $i?>" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener<?php echo $i?>" ).click(function() {
$( "#dialog<?php echo $i?>" ).dialog( "open" );
});
});
</script>
<?php
$i++;
}
?>
Basically there will be multiple popup and you need to give unique id to each popup and button.
to use id in this situation is not good idea ... you should change id to class
echo "<button class='opener'>".$row->app_name."</button>";
then
$( ".opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
id is unique you should use a class
Enjoy :)
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 );
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.