Is it possible to trigger mouseover on body load - javascript

I need to trigger mouseover event on body load. I have done the below code:-
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#outer").trigger("mouseover");
$( "#outer" ).mouseover(function() {
alert("rrrrr");
$( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
});
});
</script>
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
But it's not working. Any help please?

You are possibly triggering the code before the body is actually wrote to the page. I made up a JSFiddle and got it working putting the trigger after the function. Not sure why but it works.
$( "#outer" ).mouseover(function() {
alert("rrrrr");
$( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
});
$("#outer").trigger("mouseover");
here is my JSFiddle

Related

Divs hiding and showing in a sequential order

I am creating a checkout page and I am structuring it so it is three steps.
Shipping info
Payment
Order confirmation
I am wanting to create this so they sequentially display with only one displaying one at a time. What I have created so far is using the toggle method approach and it somewhat does what I want with making the divs show and hide, but I am wanting this in a more sequential manner, meaning they can't get to step two without completing step 1.
The toggle approach is also an issue in the regards that if I hit button 2, I have hit that button again for it to go away.
Also with toggle approach I created, the shippinginfocontainer (Shipping Info), it never goes away. It always displays. I tried adding display: none to the CSS portion of it, but then it never displays.
The toggle approach is working and is not broken. I am looking for other solutions to possibly add to this to gain the desired effect of making this sequential and not having to "untoggle" a div.
Also I am unable to get the 1st div container (shipping info) to disappear when going to a different div.
$( '#button1' ).click(function() {
$( '.shippinginfocontainer. ).toggle( "slow" );
});
$( '#button2' ).click(function() {
$('.paymentinfocontainer' ).toggle( "slow" );
});
$( '#button3' ).click(function() {
$( '.confirmationinfocontainer' ).toggle( "slow" );
});
The jsfiddle still doesn't display how I created it. It is only my second time using it...sorry. I just thought it would be an easier way to read the code.
Fiddle
Edited...
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide1").click(function(){
$("#p1").show();
$("#p2").hide();
$("#p3").hide();
});
$("#hide2").click(function(){
$("#p1").hide();
$("#p2").show();
$("#p3").hide();
});
$("#hide3").click(function(){
$("#p1").hide();
$("#p2").hide();
$("#p3").show();
});
});
</script>
</head>
<body>
<p id="p1">Hey there, its me urs truly p1.</p>
<p id="p2">Hey there, its me urs truly p2.</p>
<p id="p3">Hey there, its me urs truly p3.</p>
<button id="hide1">Button1</button>
<button id="hide2">Button2</button>
<button id="hide3">Button3</button>
</body>
</html>
i have updated your code on jsfiddle kindly check it.
$(function(){
$( '#button1' ).click(function() {
$( '.shippinginfocontainer' ).toggle( "slow" );
});
$( '#button2' ).click(function() {
$('.paymentinfocontainer' ).toggle( "slow" );
});
$( '#button3' ).click(function() {
$( '.confirmationinfocontainer' ).toggle( "slow" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="spancenter"><p>Easy three step ordering process</p></span>
<ul class="checkoutmenu">
<button class="checkoutbutton" id="button1">1. Shipping Information</button>
<button class="checkoutbutton" id="button2">2. Payment Information</button>
<button class="checkoutbutton" id="button3">3. Order Confirmation</button>
</ul>
<div class="shippinginfocontainer">HELLO DUMMY</div>
<div class="paymentinfocontainer">HELLO DUMMY</div>
<div class="confirmationinfocontainer">HELLO DUMMY</div>
Regards
Try this code ::
$('#button1').click(function(){
$(".paymentinfocontainer, .confirmationinfocontainer").hide("slow");
$(".shippinginfocontainer").show("slow");
});
$('#button2').click(function(){
$(".shippinginfocontainer, .confirmationinfocontainer").hide("slow");
$(".paymentinfocontainer").show("slow");
});
$('#button3').click(function(){
$(".paymentinfocontainer, .shippinginfocontainer").hide("slow");
$(".confirmationinfocontainer").show("slow");
});
CHECK FIDDLE HERE
OR
Try it also : Tested working successfully
<button class="checkoutbutton" onclick="showhide('shippinginfocontainer');" id="button1">1. Shipping Information</button>
<button onclick="showhide('paymentinfocontainer');" class="checkoutbutton" id="button2">2. Payment Information</button>
<button onclick="showhide('confirmationinfocontainer');" class="checkoutbutton" id="button3">3. Order Confirmation</button>
function showhide(show) {
var y = ['shippinginfocontainer','paymentinfocontainer','confirmationinfocontainer'];
y.splice( $.inArray(show, y), 1 );
for(var i=0;i<=y.length;i++) {
$("."+y[i]).hide("slow");
}
$("."+show).show("slow");
}

Toggle 2 div with one onclick

I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE
You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo
Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.
You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo
Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo
Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo
It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.
see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()
You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});

jquery hide not working for same div class after ajax call?

1.This is my code here i have a div class inner which is dynamically loaded using ajax call
and after ajax call if i click the hide button it is not working.
But its working perfectly before ajax request.
so in order to overcome i just add a outer div and hide that div this time it works..
I don't know why?
$( "#inner" ).replaceWith( data ); /*and*/ $( "#inner" ).hide(); //not working
$( "#inner" ).replaceWith( data ); /*and*/ $( "#outer" ).hide(); //working
Why we cant use the same div class ?
<html>
<div id="outer">
<div id="inner">
<br /> <br /> <br />
<div> <input type="button" value="signup" onclick="changeval();"/>
</div>
<br /> <br />
</div>
</div>
<input type="button" value="hide" onclick="onhide();"/>
<script language="javascript">
function changeval(context)
{
var typeval="sdsf";
var url="sdfsdf";
$.ajax({
type:'POST',
url:'htp://sscs/registration',
data:'&typeval='+typeval+'&url='+url,
success:function(data) {
$( "#inner" ).replaceWith( data );
}
});
}
function onhide()
{
$( "#inner" ).hide();
}
</script>
Use .html()
$("#inner").html(data);
instead of .replaceWith() as
Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
DEMO of replaceWith, Here you can see div with second class is replace with input content.
It doesn't work because you replace the <div id="inner">.
Including the div and its ID. <div id="outer"> remains so your other hide works, it still finds that div.
Use like this:
$( "#inner" ).replaceWith( function(){
return $(this).data();
} );
After your ajax call the #inner-div does not exist anymore. You are replacing it with the response from your ajax request .
You could use $("#inner").html(data); to keep the div and then hide it once you received the response.

How to detect content change event on a div

I am trying to make an editor everything working fine till now, but now I need to make a handler which could detect any change made in a div or any content edited in the div
<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
<div id="options">
<span><a id="iimg">Insert Image from gallery</a></span>
<span>Upload image to gallery</span>
<span><a id="iheading">Heading</a></span>
</div>
<div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
</div><!-- viewable editor -->
<input type="hidden" name="textareacontent" value="" id="textareacontent" >
<!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->
<script>
$(document).ready(function(){
$('#iheading').click(function(){
$('#product_descriptioncontent').append('<h1>Heading</h1>');
});
$('#iimg').click(function(){
$('#imc').load('imagegallery.php',function(){
$('#gallery img').on('click',function(){
$('#product_descriptioncontent').append('<img src="http://localhost/sites/site_pics/otherpic/1.png"><br> ');
});
});
});
$('#product_descriptioncontent').change(function(){
alert("pppp");// how to capture this event
});
});
</script>
I have placed a bit of my code at jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/
thanks for your precious time
Try adding a handler for DOMCharacterDataModified. Might be a cleaner solution.
Do you like this? http://jsfiddle.net/Ralt/hyPQC/
document.getElementById( 't' ).onkeypress = function( e ) {
var evt = e || window.event
alert( String.fromCharCode( evt.which ) )
}​
It's not waiting for a change event, it's kind of pointless.
Instead, it's listening to the onkeypress event. Everytime a user changes the content of this div (by adding a character to it), it triggers the event.
You can also see how to get the character clicked (using String.fromCharCode( evt.which )).
PS: a full jQuery solution for your specific case would be this:
$( '#product_descriptioncontent' ).on( 'keypress', function() {
$( '#your-hidden-input' ).val( $( this ).text() )
// Or
$( '#your-hidden-div' ).text( $( this ).text() )
} )
You can bind a custom event to the div and trigger that event upon change
Demo in Stack Snippets and jsFiddle:
$(function() {
$('#wrapper').bind("contentchange", function() {
console.log("Captured content change event");
});
$("#btn").click(function() {
$('#wrapper').html("new value").trigger("contentchange");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="wrapper"></div>
<input type="button" id="btn" value="click here">

Categories