I am having difficulties to code a simple jquery enlarge image feature on a image however i do not want plugins. So when you click on a image it pops up and enlarges the image size and when you click on "x" it closes the enlarge image.
Just us www.fancybox.net. If you really not want to use any plugin you will still endup with the samecode as one plugin.
Do something like this if you really want not to use a plugin.
$(document).ready(function () {
$("img").toggle(function () {
var width = $(this).attr("width");
var height = $(this).attr("height");
// Add function for displaying
}, function () {
// Add function for closing
})
})
You could use zoom css for this (but not supported in all browsers yet)
$('#myImage').css({zoom: '200%'})
Related
I was wondering if it is possible to enable no-resize for a popup window (in Chrome).
I am aware that there have been several changes as far as the rules for this type of thing goes, which is most-likely why most of the posts I found didn't work.
I am not sure how I could achieve this, but I'm assuming it is possible.
If I run window.onresize = () => window.resizeTo(500, 500); in a popup, it works, but since the user resizes it then it pops back it doesn't look so great. Is there a way to just disable resizing as a whole?
Thanks!
Can't you just use fixed width and height for the pop-up and overflow:hidden on his parent?
Not sure though!
update
Forget what i have said!
Try this:
window.addEventListener('load', () => {
const popup = window;
console.log(popup);
popup.addEventListener("resize", () => {
popup.resizeTo(500, 500);
})
});
I have this 2 pieces of code
function fixFooter() {
var wrapper = $('#disqus_wrapper').height();
if ( wrapper > 200 ) {
$(window).trigger('resize');
}
};
var element = $('#disqus_wrapper');
new ResizeSensor(element, function() {
fixFooter();
});
The expected effect is that the window will resize every time the div#disqus_wrapper changes height. (to fix comments and footer overlapping)
Well the code works, but only once after the page loads. I need it to resize each time the div changes in height. I tried switching the trigger('resize') function with an alert and everything works perfectly. Any idea why the trigger('resize') only works once and how can I fix it?
Update ;
The html is just this because I am loading the Disqus comment system
<div id="disqus_wrapper"><div id="disqus_thread"></div></div>
For detecting the div height change I am using this library
https://github.com/marcj/css-element-queries (the ResizeSensor.js)
You need to call your function fixFooter() in window resize event.
$( window ).resize(function() {
fixFooter();
});
Got stuck with some trouble.
I got a page, where I use #media to create mobile and tablet version separatly. In mobile version I use mmenu jquery plugin, to make a sliding menu. In tablet version I do not want to use this menu, but still planning to use it's html. So I decided to remove id, that shows mmenu plugin where it need to make sliding menu. But for some reason juery's removeAttr does not work as I expected.
Ps: I'm pretty new to js, so I might not know about thihgs related to browser workings.
I got this code (html is pretty simple - nav, that wraps a bunch of ul's) :
var func = function() {
var width = $(window).width();
var menu = $(".menu");
/*if it is tablet*/
if (width > 401) {
menu.removeAttr("id");
}
/*loading mmenu*/
$(function() {
$('#my-menu').mmenu({
slidingSubmenus: false,
zposition: "next"
});
});
};
$(document).ready = func();
I'll be very happy if someone clarifies where is my mistake.
You're binding document.ready incorrectly. It should be
$(document).ready(func);
You don't set the property, and you don't call your function.
Instead of removing the ID from #my-menu, you could move the function to create the menu inside the width-checking function. That way, the menu is only created if the width is wider than 401. Otherwise it's skipped altogether.
if (width > 401) {
$(function(){
$('#my-menu').mmenu(...);
});
}
I'm trying to get a CSS loader showing up on the website while content is loading. I'm using this tool to create the loader: http://cssload.net/
Some of my pages do have a lot of tabs and the content has to be loaded before the user can interact with the website. I don't know what I have to look for to get this loader showing up.
I think I have to use the .onload() JavaScript?
You need to toggle the visibility of that image tag which contains the gif. Just simply show the image initially and when the page is loaded, hide the image.
Sample demo: http://jsfiddle.net/GCu2D/140/
$(document).ready(function () {
$('a').click(function(){
$('img').toggle();
return false;
})
});
This is a jQuery code, although you can do the same in javascript. by setting display to none or block accordingly.
place the loader on the page on top of all other elements and give it an id 'loader' for example then try this:
document.addEventListener('DOMContentLoaded', onReady, false);
function onReady()
{
var loader = document.getElementById('loader');
loader.style.display = 'none';
}
Note: this wont work in IE < 9
I'm new to jQuery and found the toggle function really attractive. I wanted an image to switch to different image after a click and back again, like this:
$(document).ready(function() {
$("#expand").toggle(function(){
$(this).attr("src","images/expandWidget.png");
},function(){
$(this).attr("src", "images/minimizeWidget.png");
});
}); // end ready
And the image itself is declared like this:
<img id="expand" src="images/minimizeWidget.png"></img></div>
I notice that when I ran this through Chrome, the image changed to:
<img id="expand" src="images/minimizeWidget.png" style="display: none;">
And my image did not show. Why did Chrome do that? If I instead change the toggle to click(), my image shows without a problem and I can switch to a different image, but not back of course. I have no errors in the console and the page doesn't import other styles that would affect img. Am I using the toggle incorrectly? Please let me know if you need more information.
Thanks
Instead of toggle use .click()
LIVE DEMO
var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
this.src = images[++c%2];
});
You've misunderstood what jQuery toggle does.
It 'toggles' the visibility of an element, hence it disappearing. It's not the greatest name admittedly, but we all used to have to write our own version of the toggle method inside .click().
See the documentation:
http://api.jquery.com/toggle/
You probably want something like:
$("#expand").click(function(){
if($(this).attr("src") == "images/expandWidget.png") {
$(this).attr("src", "images/minimizeWidget.png");
} else {
$(this).attr("src","images/expandWidget.png");
}
});