How to merge two scripts and trigger them both at once? - javascript

I am writing an website from the scratch probably for the first time and I am stucked in javascript.
My idea is to trigger the link by a click which will run two javascripts at once.
Here is the situation:
Link to click:
<li><p class="button">VIDEO</p></li>
Iframe as a target:
<li><iframe width="800px" height="1000px" frameBorder="0" name="iframe"></iframe></li>
js 1:
<script>
$('.button').click(function () {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('#zelena').stop().animate({
left: 151
});
} else {
$('#zelena').stop().animate({
left: -649
});
}
});
</script>
js 2:
<script>
$(".button").on("click", function() {
$(this).toggleClass("underline");
$(".button").not(this).removeClass("underline");
});
</script>
here I uploaded the whole website: http://www.filedropper.com/mgwebslidefinaliframe
(The problem is that I have to click 2 times at "VIDEO" link/button to show the iframe content and that´s the problem, because on the second click It should close like It´s doing right now. So we can´t see the iframe content because of the no needed second click...
Thanks in advance for any help.

$('.button').on('click', function () {
$(this).toggleClass('active underline');
$(".button.underline").not(this).removeClass("underline");
if($(this).hasClass('active')) {
$('#zelena').stop().animate({
left: 151
});
} else {
$('#zelena').stop().animate({
left: -649
});
}
});

You have added the reference to the button. Just add the following attribute to your iframe tag: src="video_iframe.html" and remove the a tag added to the button. I think this should solve your issue.

Related

Checking if an element has a specific class in jquery not works

I am stopped up with a very simple functionality that worked with me many times back but not working right now.No specific errors in console also.
I am trying to check if there is a specific class for a div containing .form-content.inactive classes.I am trying to find if there is another class opened .
My codes are below mentioned
$(document).ready(function() {
if($('.form-content.inactive').hasClass('opened')){
$(".form-content a").click(function(event) {
alert('has');
});
}
});
No alerts are given on click.I am stupid now for a while :p
If your div hasn't the class opened from the beginning, you should do it this way.
$(document).ready(function() {
$(".form-content a").click(function(event) {
if($('.form-content.inactive').hasClass('opened')){
alert('has');
}
});
});
Otherwise your code could work.. When your div has the class opened already before the document became ready, only then jQuery is able to subscribe your click element to the event.
$(document).ready(function() {
if ($('.form-content.inactive').hasClass('opened')) {
$(".form-content a").click(function(event) {
alert('has');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Click!</a>
</div>
Instead of checking for opened you could use a delegate:-
$(document).ready(function() {
$('body').on('click', '.form-content.inactive.opened a', function(event) {
alert('has');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Link</a>
</div>
This will fire the click event for a if the .form-content has both classes .inactive and .opened.
If you insist on using hasClass and you have multiple .form-content then you should use this to get the closest .form-content and check for both classes.
$(".form-content a").click(function(event) {
var formContent = $(this).closest('.form-content');
if(formContent.hasClass('inactive') && formContent.hasClass('opened')){
alert('has');
}
});

lightbox activates when clicking the link twice instead of once

I'm having a weird issue where I have to click twice on a link(button) instead of once to activate the lightbox event and cant figure out why for the life of me.
here is my code and here is a preview of the page , if you'll notice you'll have to click twice on the watch button to activate the lightbox event.
(link removed so Google doesn't index)
<script type="text/javascript">
var $j = jQuery.noConflict();
var src = '';
$j(function()
{
$j("span#btnclick").click(function(event)
{
event.preventDefault();
$j("a.watchbutton").nivoLightbox({
effect: 'fade',
afterShowLightbox: function()
{
src = $j('.nivo-lightbox-content > iframe').attr('src');
$j('.nivo-lightbox-content > iframe').attr('src', src +'?autoplay=1');
}
});
});
});
</script>
That is because you are defining the lightbox functionality inside the click event. So when you click first time, the lightbox functionality is defined. Second time it's redifined, but before it work because it was already defined.
The solution is to extract the lightbox functionality definition out of click event:
$j("span#btnclick").click(function(event){
event.preventDefault();
});
$j("a.watchbutton").nivoLightbox({
effect: 'fade',
afterShowLightbox: function()
{
src = $j('.nivo-lightbox-content > iframe').attr('src');
$j('.nivo-lightbox-content > iframe').attr('src', src +'?autoplay=1');
}
});

jQuery - Hide a particular div until another is clicked and hide that div again when div is hovered off

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)

JQuery Mobile, load then change possible?

I'm trying to load an external page and insert it in my HTML. Here is my code :
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(document).ready( function() {
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});
});
When I execute it, I need to press the button twice before it change my page. How can I fix this ?
Thanks !
you have wrong syntax. Please check if this works for you.
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});

Jquery thumbnail gallery changing all images

I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);
$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.

Categories

Resources