This question already has answers here:
Popup Window stopped working after jQuery update
(2 answers)
Closed 9 years ago.
I had a working popup script that worked great using
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>.
I am migrating to bootstrap which has me use
<script src="//code.jquery.com/jquery.js"></script>.
Removing the first and using the second causes the popup to become unclosable. It opens but clicking the close button doesn't work. If I go back to the old version of jquery my bootstrap dropdown navigation stops working. How do I get these two to coexist?
Here is the script:
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<img src="http://www.bakercommunications.com/images/close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
I did copy the CSS for the popup into bootstrap.css. The formatting is fine, just the close function doesn't seem to run. This is my first time using this site, so hopefully I have explained it clearly enough. Have wasted a day solving the popup problem, only to have it break the top nav.
$.live was removed in jQuery 1.9, this may be the issue. Try using $.on instead:
$('a.close, #fade').on('click', function() {
Related
i have created the div , in that i have some multiple buttons when user wants to scroll down he can click on down arrow button for scrolling up he can click up arrow button , my problem is when we click on arrow buttons scroll takes me end of the div , i want to scroll by pixels how to do it ?
// this is for scrolling down
//Require jQuery
function scrollSmoothToBottom (id) {
var div = document.getElementById(id);
$('#' + id).animate({
scrollTop: div.scrollHeight - div.clientHeight
}, 500);
}
//Require jQuery
function scrollSmoothToTop (id) {
var div = document.getElementById(id);
$('#' + id).animate({
scrollTop: 0
}, 500);
}
I looked over your code and tried googling .animate()
https://api.jquery.com/animate/
and scrollTop
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
and came up with this idea:
function scrollSmoothDown (id) {
var div = document.getElementById(id);
var howManyPixelsToScroll = 5; //change to any number
$('#' + id).animate({
scrollTop: div.scrollTop + howManyPixelsToScroll // not sure about this syntax
}, 500);
}
If my syntax inside the animate method is right, then this would work and the complementary scrollSmoothUp function would just use a negative number instead of a positive number for howManyPixelsToScroll.
(If you had been able to post a working snippet I could have copied that code and tested these changes, but I don't work much with jQuery, so this is just my best guess, not tested.)
I have created the page in wordpress, it loads each section one at a time on mousewheel event, on mousewheel event the transform property working fine.
But when i bind the click event for transform then at every click it tranform the div at the bottom of screen and then it goes to the section.
Please see this link : Click Here
When you will click on the Testimonials from top right menu bar then it goes at the bottom of screen and then move up-word on the testimonial section.
I am using the below code on click :
jQuery( window ).on( "load", function($) {
//go to specific slider on menu click
var item = document.getElementsByClassName("scroll-custom-js");
jQuery.each( item, function( i, val ) {
this.addEventListener("click",function(e){
var link = jQuery(this).attr('href');
jQuery('.scroll-custom-js').removeClass('arrow-custom');
jQuery(this).addClass('arrow-custom');
gotoSlide(link);
});
});
});
var gotoSlide = function () {
document.querySelector(sliderElement).style.transform = 'translate3d(0, ' + -(currentSlide - 1) * 100 + '%,0)';
document.querySelector(sliderElement).style.transition = 'transform 1000ms ease 0s';
});
In jQuery :
jQuery('a.scroll-custom-js').click(function(e){
var link = jQuery(this).attr('href');
jQuery('.scroll-custom-js').removeClass('arrow-custom');
jQuery(this).addClass('arrow-custom');
e.preventDefault();
var move_slides = jQuery(link).attr('data-slider-index');
move_slides = move_slides - 1;
jQuery('.slides_custom').css({
transform: 'translate3d(0, ' + -(move_slides) * 100 + '%,0)',
});
});
Use unbind() to remove any click event that is bind to that div
jQuery('a.scroll-custom-js').unbind('click').click(function(e){
I have a function that resizes divs depending on how high (in pixels) other divs with the same class are:
<script type="text/javascript">
function resizeTheDivs(tag){
// first get the tags to adjust
var $tags = $('.' + tag);
var $new_height = 0;
// find out which one is largest
$('.' + tag).each(function(){
$(this).height() > $new_height ? $new_height = $(this).height() : null;
});
// make all others that height
$tags.height($new_height);
// I console.log($new_height) here sometimes
}
// resize divs on document load
$(document).ready(function(){
resizeTheDivs('the-class');
});
// resize divs on window resize
$(window).resize(function () {
resizeTheDivs('the-class');
});
</script>
The divs resize correctly on page load, but when console.log($new_height) fires from the window resize function, the $new_height is not changed.
Context: There are 3 divs (floated left, so next to each other with 33% width) that contain text in p tags. So when I resize the browser width, the text gets 'longer', but the javascript function isn't picking up the new heights of the divs.
Any ideas?
You need to reset the height to auto before measuring it, or else it will always return the fixed value you set in $(document).ready:
function resizeTheDivs(tag){
// first get the tags to adjust
var $tags = $('.' + tag);
var $new_height = 0;
// find out which one is largest
$('.' + tag).each(function(){
$(this).removeAttr('style');
$(this).height() > $new_height ? $new_height = $(this).height() : null;
});
// make all others that height
$tags.height($new_height);
// I console.log($new_height) here sometimes
}
First of all, thanks for reading. I don't know anything about jQuery or JavaScript, that's why I'm here.
Searching a little bit I found the code I want, but unfortunately the gallery I'm making has several elements, and this code doesn't work as I want.
This is the little script I have:
function showImage(imgName) {
var curImage = document.getElementById('currentImg');
var thePath = '/images/full/';
var theSource = thePath + imgName;
curImage.src = theSource;
curImage.alt = imgName;
}
<span class="thumb_ef"><img src="images/thumb/image1.png" alt="Image One"/></span>
<span class="thumb_ef"><img src="images/thumb/image2.png" alt="Image Two"/></span>
<span class="thumb_ef"><img src="images/thumb/image3.png" alt="Image Three"/></span>
<div id="first_window" class="modal_window">
<h2>Title here</h2>
<div id="preview">
<img id="currentImg" class="bigimg" src="images/full/image1.png" alt="images/full/image1.png">
</div>
<h3>Thumbnail preview</h3>
<div id="thumb">
<span class="thumb_mef"><img src="images/full/thumb_image1.png" alt="images/full/thumb_image1.png" onclick="showImage('image1.png');"></span>
<span class="thumb_mef"><img src="images/full/thumb_image2.png" alt="images/full/thumb_image2.png" onclick="showImage('image2.png');"></span>
<span class="thumb_mef"><img src="images/full/thumb_image3.png" alt="images/full/thumb_image3.png" onclick="showImage('image3.png');"></span>
<span class="thumb_mef"><img src="images/full/thumb_image4.png" alt="images/full/thumb_image4.png" onclick="showImage('image4.png');"></span>
</div>
</div>
Let me explain a little bit, because I'm not gonna put all the unnecesary code here.
In the gallery, I have several little images, when you click them, triggers a modal box with different ID for each image in order to load different content for each element.
Inside the modal, I have a title, a full-size image and four thumbnails preview images. This thumbnails images triggers the code I left before, loading the full-size image in the same ID when you click the thumbnail.
The problem I have is... I need to repeat this ID for the different modals, but if you want to click the thumbnails and load the full-size image of any other modal that's not the first, you don't gonna see the changes (Because the code works on the first ID).
I think the solution to this is add the ID (currentImg) only when the modal opens, and after remove this ID when the modal close, to solve the problem.
I don't know how to do that, and probably I need to mix both codes but again, I don't know anything about jQuery/Javascript, here's the modal code:
$(document).ready(function(){
var window_width = $(window).width();
var window_height = $(window).height();
$('.modal_window').each(function(){
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
var top = (window_height-modal_height) / 2;
var left = (window_width-modal_width) / 2;
$(this).css({'top' : top , 'left' : left});
});
$('.activate_modal').click(function(){
var modal_id = $(this).attr('name');
show_modal(modal_id);
});
$('.close_modal').click(function(){
close_modal();
});
function close_modal(){
$('#mask').fadeOut(500);
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
$('#mask').css({ 'display' : 'block', opacity : 0});
$('#mask').fadeTo(500,0.8);
$('#'+modal_id).fadeIn(500);
}
});
Hope you can understand, my native language isn't english, please tell me if you don't understand.
Fixed: The only thing I need was to search the ID of the modal box, then search the class of the img element and add an ID to that. After this, on the close modal event, remove any ID from the img class.
This is the final result:
$(document).ready(function(){
var window_width = $(window).width();
var window_height = $(window).height();
$('.modal_window').each(function(){
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
var top = (window_height-modal_height) / 2;
var left = (window_width-modal_width) / 2;
$(this).css({'top' : top , 'left' : left});
});
$('.activate_modal').click(function(){
var modal_id = $(this).attr('name');
show_modal(modal_id);
$('#'+modal_id).find('.bigimg').attr('id', 'currentImg');
});
$('.close_modal').click(function(){
$('.bigimg').removeAttr('id');
close_modal();
});
function close_modal(){
$('#mask').fadeOut(500);
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
$('#mask').css({ 'display' : 'block', opacity : 0});
$('#mask').fadeTo(500,0.8);
$('#'+modal_id).fadeIn(500);
}
});
I have a little problem in making a small functionnality using jQuery and ASP.NET MVC 4.
I have a list of thumbnails, wich represents a list of products in my aplication :
<ul class="thumbnails">
#foreach (var thumbnail in Model.ForfaitsInThumbNail)
{
<!-- Now I Display Some infos about the thumbnail -->
<!-- This is the Dialog that I want to display when the cursor is hover every thumbnail -->
<div class='pop-up' id='pop-up'><h3>"#thumbnail.Forfait.Titre"</h3><p>"#thumbnail.Forfait.Description"</p></div>
</div>
<!-- This simply displays a description and the title of every product -->
}
</ul>
Well, I have a jQuery function that displays the pop-up menu customized to display the specific title and description of every product :
<script type="text/javascript">
$('.thumbnail').hover(function (e) {
$('#pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$('#pop-up').hide();
});
$('.thumbnail').mousemove(function (e) {
$("#pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>
So this function is working well, but it is not satisfying all my needs, because it only displays the title and description of the last thumbnail, but I need a function that narrows every div that have 'thumbnail' and displays it's specefic title and description. Any Ideas ? I would be very thankful for your help :)
Edit
Here is my new function like suggested :
<script type="text/javascript">
$('.pointHere').hover(function (e) {
$(this).children('.pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$(this).children('.pop-up').hide();
});
$('.pointHere').mousemove(function (e) {
$(this).children('.pop-up').css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>
I made a div wich has a class pointHere, and when we click to it the child element pop-up is displayed :) that works fine :) but the mouseover function doesn't work, also the hover function doesn't hide the pop-up when the mouse is not hover the pointHere div.
The problem is with the id pop-up. It is not unique. You have the same Id for all of your thumbnails
Instead of binding hover on .thumbnail, bind it on .pop-up and use this to get hold of that div
$('.pop-up').hover(function (e) {
$(this).show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$(this).hide();
});
Also, you have bad HTML. Your pop-up div is closed twice.