I created a lightbox for a photo gallery using jquery. However, for mobile and smaller viewports I'd like to disable the Jquery script. I've tried a few different methods but none resulted in success.
Here is what I have so far:
var $overlay = $('<div id="overlay"><div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$overlay.append($image);
$overlay.append($caption);
$("body").append($overlay);
$(".row a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
$overlay.show();
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
$overlay.click(function(){
$overlay.hide();
});
It seems like it should be super simple, but I'm at a loss. If anyone can point me in the right direction I would really appreciate it. Thanks~
you can set WIDTH to any number you want.
var $overlay = $('<div id="overlay"><div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$overlay.append($image);
$overlay.append($caption);
$("body").append($overlay);
WIDTH = 480;
$(".row a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
if($(window).width() > WIDTH) $overlay.show();
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
$overlay.click(function(){
$overlay.hide();
});
you can disable the click on the images for devices
var window_width = $(window).width();
if (window_width <= 960) {
$('a > img').click(function(e) {
return false;
});
}
Related
I'm using jQuery to animate the divs on my page when they are in view. To do this I'm using this code:
var $window = $(window);
// Scrolling animations //
function check_if_in_view() {
var $animation_elements = $('.animation-element');
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
$(document).ready(function() {
check_if_in_view();
});
This works great when you load the page from the top. However, if you scroll down the page, click a link and then go back to the previous page, the page begins where you left it and the divs aren't appearing.
Is there anyway I can modify this code so when the page loads if the divs have been scrolled past then they appear?
Does that make sense?
I have found the following code for resizing the textareas to extend according to the content.
$(document).ready(function() {
$(".content").on("keyup",function(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
});
});
The code works well, but the textareas extend only after selecting them and making a change.
I would like them to extend on the page load already.... Any ideas?
Thank you!
Try this:
$(document).ready(function() {
var $content = $('.content');
$.each($content, resize);
$content.on("keyup", resize);
function resize(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
}
});
Guys i wrote a very simple jquery script to place elements properly on a webpage, basically making it responsive without media queries. Now it works just fine but the window.resize is not triggering so on document.ready it works on window resize it does not. Any help would be highly appreciated. Putting the link to the page at the bottom
// JavaScript Document
$(document).ready(PlaceContents);
$(window).ready(PlaceContents);
$(window).on('resize',PlaceContents);
function PlaceContents() {
var Wheight = $(document).height();
var Wwidth = $(document).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
};
http://www.mobileapplicationlabs.com/goldentreehotels/
Hope this is what you are looking for.
window.addEventListener('resize', function() {
PlaceContents();
}, false);
you can use following function
$(window).bind("load resize", function () {
PlaceContents();
});
Hope this will help you.
you should do callback on this:
$(document).ready(function(){
PlaceContents();
});
function PlaceContents() {
var Wheight = $(document).height();
var Wwidth = $(document).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="maincontent" method="POST">
<input type="submit" value="menubar" name="menubar" id="menubar">
</form>
Well you can write the same code like this :
resize function will run once the page has been loaded and also on resize event.
Good luck :)
$(document).ready(function(){
$(window).resize(function(){
var Wheight = $(window).height();
var Wwidth = $(window).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
}).resize();
});
Try this code:
$(document).ready(function(){
$(window).resize(function(){
var Wheight = $(window).height();
var Wwidth = $(window).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
});
});
I am creating onClick jquery tooltip on the basis of 'offset()'. Everything works well apart when the user comes at the bottom. Tool tip actually goes hide.
Its a obvious thing I have given the main container 'overflow:hidden'. But I would like to re-position the tool tip or may be this time not according to offset position.
Ultimately I don't want to hide it.
Any suggestion or help much appreciated. Apologies if I couldn't explain it in right manner.
Here is the code and fiddle URL:
$('#data-list > li').on('click', function(){
var $this = $(this), thisoffset = $this.offset().top;
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({top:thisoffset-15}, 300).fadeIn();
});
http://jsfiddle.net/mufeedahmad/ndk44/12/
Thanks in advance.
Basically you have to check if the container-slide goes out of the wrapper box. You can add this line
if(thisoffset + $('.container-slide').height() > $(".wrapper").height())thisoffset = $(".wrapper").height() - $('.container-slide').height() + 15;
So the final code becomes
$('#data-list > li').on('click', function(){
var $this = $(this), thisoffset = $this.offset().top;
if(thisoffset + $('.container-slide').height() > $(".wrapper").height())thisoffset = $(".wrapper").height() - $('.container-slide').height() + 15;
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({top:thisoffset-15}, 300).fadeIn();
});
Check this fiddle http://jsfiddle.net/aZJuN/
var divleftoffset = $(".wrapper").offset().left - $(document).scrollLeft();
var left = event.pageX; -$(document).scrollLeft();
menuWidth = $(".container-slide").width();
divWidth = $(".wrapper").width();
menuleft = menuWidth + left;
divleft = divleftoffset + divWidth;
var right;
if (menuleft > divleft) {
left = left - menuWidth;
}
var divrightoffset = $(".wrapper").offset().top - $(document).scrollTop();
var Top = event.pageY; -$(document).scrollTop();
menuHeight = $(".container-slide").height();
divHeight = $(".wrapper").height();
menuTop = menuHeight + Top;
divTop = divrightoffset + divHeight;
var right;
if (menuTop > divTop) {
Top = Top - menuHeight;
}
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({ top: Top - 15 }, 300).fadeIn();
I'm trying to get the height and width of the images in the bx slider slides, the problem is that each of them (without the loaded first one) returns zero.
Here is a sample of my code:
$('.slides > li > img').each(function(){
var $this = $(this);
var imgWidth = $this.width();
var imgHeight = $this.height();
console.log(imgWidth);
console.log(imgHeight);
})
I also tried putting them in a on load function like this:
$('.slides > li > img').each(function(){
$this.on('load', function(){
var $this = $(this);
var imgWidth = $this.width();
var imgHeight = $this.height();
console.log(imgWidth);
console.log(imgHeight);
}
})
... but it's still not working =\
Any help will be greatly appreciated!
Edit:
Here's a fiddle: http://jsfiddle.net/a3BUA/1/
Edit 2:
I now see that when the mode is set to fade - the rest of the <li> elements are set to display:none. Is there a way to get the image dimensions despite of this?
The slider hides all but the first image, and hidden images have no dimensions so you have to use the source (literally) to create a new image object, and then get the dimensions from that once the image has loaded
$(document).ready(function () {
$('.normal-slides').bxSlider({
mode: 'fade',
auto: false,
pager: false
});
$('.normal-slides img').each(function () {
var img = this;
var new_img = new Image();
new_img.onload = function() {
console.log('imgWidth = ' + this.width)
console.log('imgHeight = ' + this.height)
}
new_img.src = img.src;
});
});
Try with something like that
$('.slider img').each(function(){
$this = $(this);
var imgWidth = $this.width();
var imgHeight = $this.height();
console.log(imgWidth);
console.log(imgHeight);
});
Fiddle