In between parent and iframe: mouseover/out combined with click behavior - javascript

I am very new in programming. Please give me a mercy.
According to the post mouseover/out combined with click behavior .
I would like to ask further question since I still cannot achieve the task.
Here below is my code:
Child.html
<div id="custom_div">This div will be highlighted</div>
Parent.html
<iframe id="iframeID" src="Child.html"></iframe>
Click to highlight the custom div in Child.html
<script>
$('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
$('#Custom_div').addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
</script>
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.

If I have understand your requirement currently this should resolve this issue
<script type="text/javascript">
$(window).load(function (){
var triggered_div = $('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
triggered_div.toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
triggered_div.addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
});
</script>

this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:
First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"
I believe that this is because you're unbinding mouseenter mouseleave on click:
$(e.currentTarget).unbind('mouseenter mouseleave');
from http://api.jquery.com/hover/
The .hover() method binds handlers for both mouseenter and mouseleave events.
for that reason,
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
does not "work" anymore and the highlight class stays on your div

Related

Mouse out event doesn't move back outside the button

I have a button and when you hover over it, it shows some text and 2 more buttons but when I move my mouse out of it, it still stays on the hover. How do I make my code work so that it works on mouse out?
This is my Javascript:
var option1Button_Mouseout = function() {
console.log('option1Button_Mouseout()');
$('laStyle-option1-button')[0].innerHTML = outputTag;
};
var attachOption1ButtonListeners = function() {
console.log($('laStyle-option1-button')[0]);
$('laStyle-option1-button')[0].addEventListener('mouseover', this.option1Button_Mouseover);
// When you mouse out of the button it brings it back to the original
$('laStyle-option1-button')[0].addEventListener('mouseout', this.option1Button_Mouseout);
};
window.onload = function() {
this.attachOption1ButtonListeners();
};
this is what it currently looks like:
https://media.giphy.com/media/9A6MoIdWBiZVFtcHyW/source.mp4
See when I hover over it it shows text and 2 buttons, when I mouse out it should go back to the picture of the hand.
Sind it is not clear what your methods are doing, consider this example:
HTML
<div id="myDiv">
<div id="myDiv1"/>
</div>
JavaScript
$('#myDiv').on("mouseover mouseenter ", function (e) {
$("#myDiv1").show();
});
$('#myDiv').on("mouseleave mouseout", function (e) {
$("#myDiv1").hide();
});
When entering the parent div the inner div will be shown. When leaving the parent div the inner div will be hidden. Also using .on as you are using jquery.
Here is the JSFiddle: https://jsfiddle.net/GR8sk/21/
Since you're already using jQuery I would use its Mouseenter and mouseleave events like so:
$("document").ready(function(){
$(".laStyle-option1-button img").mouseenter(function(){
$(this).attr('src','https://media.giphy.com/media/xUOwGdPZ0chBWiQ6Ri/giphy.gif');
});
$(".laStyle-option1-button img").mouseleave(function(){
$(this).attr('src','https://media.giphy.com/media/l4pTgiQB2e2dpuKs0/giphy.gif');
});
});
Couple things to note:
You did not add a '.' to the beginning of your jQuery reference to laStyle-option1-button (look at how the period goes before) because its a class attribute.
You are performing unnecessary event listener loading. While this can be helpful for binding to click events, I would just use the 'bind' method to bind functions to click events:
$( "#btnButton" ).bind( "click", myFunction);
You need to change either the 'src' attribute of the image, or just remove the button completely and replace with another one. The former is better performing.

How to initialize jQuery slide out with href link?

I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.

jquery document on hover function not working properly

I am wondering a function that will work similar like:
$(document).click(function () {});
but with hover function.
When I tried with :
$(document).hover(function () {});
its not working.Can any body give me some idea about this problem.
i.e.My main aim is when user mouse hover on body or documents any will give an alert message..
thanks.
You want something like this?
$(document).ready(function(){
$('#YourElementId').hover(function(){
alert('mouse hovered');
});
});
Take care of including jQuery in your page. Then, you can do
$('.someclass').on('hover', function(){ alert("something"); });
or
$('.someclass').hover(function(){ alert("something"); });
try to avoid to bind hover to document unless you have to delegate an event so you should do
$(document).on('hover', '.someclass', function() {});
Binding hover to document can provide bad experience to your users, specifically if you are showing alerts, unless, as always, you take care of which element have to show it.

jQuery code doesn't work on Google Chrome?

This code doesn't work on google chroome but works on Firefox, opera, and IE
function show() {
$('#networks').click(function () {
$('#social').slideDown(1000);
$('#face,#twitter,#google,#youtube,#rss').fadeIn(2000)
});
$('#networks').blur(function () {
$('#face,#twitter,#google,#youtube,#rss').fadeOut(1000);
$('#social').delay(1000).slideUp(1000);
});
}
at the same documents after this code i wrote the code below and work on google chroome and all other browsers, why this code works well in google chroome but above doesn't ???
function UseData() {
$("#submit").click(function () {
$(this).val("");
$(this).animate({
width: '250px',
}, "slow")
});
$("#submit").blur(function () {
$(this).val("Search");
$(this).animate({
width: '175px',
}, "slow");
});
}
thanks
http://jsfiddle.net/A4CJz/10/
I believe the effect you want is this:
when the mouse hovers over the element (not focus) then show the social menu
when the mouse leaves the element (not blur) then hide the social menu
Your markup was atrocious. That's why it wasn't working in chrome. You really need to learn valid markup and valid JS before this solution will be helpful. In particular, you cannot wrap an a tag around an li tag in a list. The only valid child of ul is li.
You also don't need to id each of the li elements and target them directly. A quick lesson in jquery will show you that you can target by the tag name, which you will see me do in the example fiddle I posted, as such: $('#social li')
I also did away with your inline JS and used jquery to wire up the mouseenter and mouseleave events.
I recommend you study the code carefully and try to understand how and why I restructured your code the way I did.
Okay, at the first your fiddle depends on jQuery so you've to include it. The second thing is that you've to load your script in the head to work with inline-code. (onclick-handlers on html-tags). Otherwise your function 'll be undefined ;-)
But to point out what your real problem is, there's nothing special needed. An a-tag cannot handle focus or blur-events.
You can read more here: http://api.jquery.com/focus/#entry-longdesc
The working fiddle:
http://fiddle.jshell.net/A4CJz/3/
Another tip, prevent the default action of your attached event, to kill its normal behaviour. Simply done with preventDefault on the event-object or an simple return false at the end of your event-handler function.
Update
http://fiddle.jshell.net/A4CJz/12/

Javascript/jQuery hover on separate elements

I have a strange problem, stemming from a layout that I cannot change to better solve this.
Basically I have a menu like so:
<div id="hornav">
<ul class="container">
<li class="item1">link</li>
<li class="item2">link</li>
</ul>
</div>
And I have drop downs separated like so:
<div class="dropdowns">
<div id="ditem1" class="dropdown-div">content</div>
<div id="ditem2" class="dropdown-div">content</div>
</div>
What i need to do is make the links hover to show the container. I can do this but I also need to make it so if I move my mouse over the drop down that shows, it does not disappear.
Because of the way the site is running, and what tools I am limited by I cannot make the dropdowns inside of the li elements (It is dynamically generated by the CMS, without any options) - This point is extremely important.
Right now this is the javascript code i am using. It functions to an extent, though IT is very buggy (If i hover over the contained element, then hover back it vanishes). This code may be slightly outdated as I have been gradually trying multiple methods, and reading up on this problem with little success.
function dropdown(event,passDown){
var classes=$(passDown).attr('class').split(' ');
for(var i=0;i<classes.length;i++){
if(classes[i].indexOf('item')!=-1){
var classId=classes[i];
}
}
var elem=$('#d'+classId);
event.preventDefault();
if(!elem.hasClass('active')){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
$('#d'+classId).addClass('active');
$(passDown).parent().addClass('active');
}else{
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
}
}
$(document).ready(function(){
$('#hornav>ul>li[class*="item"]:not(.item20)').each(function(){ //trigger all drop down links
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
if(event.relatedTarget.id.indexOf('ditem')==-1){
dropdown(event,this);
}
});
});
$('.dropdowns .dropdown-div').each(function(){
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
//if(event.offsetParent.className.indexOf('item')==-1){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
//}
});
});
});
EDIT:
We have decided to take another approach and are going to use clicks instead of hovers witch will not cause the problem.
I will leave this open for now, as it seems like a question that could help others out.
EDIT 2:
Never solved this and ended up coming up with another completely different solution. However I feel this question may help people in the future so I will leave it open if anyone wants to answer it.
for each child element, fire the events on the parent element:
jQuery(el).on('mouseenter mouseleave', function(e) {
jQuery(this).parent().trigger(e.type);
});

Categories