I have a div that I want to scale. I am using the jQuery-UI resizable option for this, but it isnt resizing the children, why?
This is the code I use to instantiate it:
$(this).resizable({
alsoResize: $(this).find('*'),
});
The code is deep inside an app so I created a fiddle that should contain the important parts:
http://jsfiddle.net/EnK4R/6/
This works with the image tag: http://jsfiddle.net/EnK4R/12/ I just cant figure out why the '*' selector wont work
here you go. this doesnt seem to resize whole document, checkout the fiddle at bottom
var init = function(){
$(this).resizable({
alsoResize: '#'+$(this).attr('id')+' *'
});
}
init.call($('#window'));
this keeps the code almost as short as yours, and it will work with what ever gets chucked into the init call. enjoy :)
http://jsfiddle.net/EnK4R/4/
first of all fix the window class selector: change it from .window to #window. And use selector string for alsoResize option:
$('#window').resizable({
alsoResize: '#window *'
});
fiddle: http://jsfiddle.net/1stein/EnK4R/
Related
I've been struggling with some code and quite seem to get it to work - apologies if this is a silly question, I'm still quite new to JavaScript/jQuery etc.
I'm trying to build a Weather App as part of the Free Code Camp course and have built using simpleWeather.js. I'm now trying to animate a little bit of the page to make it a bit more interactive. I have some code:
$('#drop').on('click', function() {
$('.fa-chevron-circle-down').css('transform', 'rotate(180deg)');
});
I believe this should on a click, rotate the icon 180 degrees but no matter what variations I try, I can't seem to get it to work. After spending hours yesterday playing with it I decided it's time to ask for help! (The idea is that once it works, I'll animate the elements below so they only show when the button is clicked).
My codepen is https://codepen.io/woftis/pen/VjppYM
Thanks in advance for any help anyone can give.
Your #drop element has been created after DOM load i.e. dynamically. Hence you need event delegation here. So attach your click to document and then refer your element - #drop.
$(document).on('click','#drop', function() {
$('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');
});
Updated PEN
To be more simpler, since #weather element existed during DOM load, insted of document you can add it to #weather element. Consider below example.
$('#weather').on('click','#drop', function() {
$('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');
});
and also I believe, it should have been 180deg to be proper turn-around.
Updated PEN 2 with 180deg and #weather
I was having an issue with jquery .css function with code that's very similar to to OP.
Problem
The .css jquery function would not change the css on my .dot-one or .dot-two classes when I clicked button with the #correct-email id.
Here's the required code examples:
$(document).on('click', '#correct-email', function () {
$('.dot-one').css('background-color', '$white');
$('.dot-two').css('background-color', '$gray-darker');
...
});
.dot-one {
background-color: $gray-darker;
}
.dot-two {
background-color: $white;
}
Solution
$(document).on('click', '#correct-email', function () {
$('.dot-one').css('background-color', '#fff');
$('.dot-two').css('background-color', '#222');
...
});
Apparently, jquery doesn't like variables SASS variables being passed into the .css function. I couldn't find that anywhere in the documentation. My assumption is that it'd be able to compute the new value based off of the SASS variable. But it seems all that stuff is pre-processed by sass and not made available to css.
According to the SASS documentation this is what it sounds like is happening.
I know, this thing has been asked like 2 trillion times, but i cannot still get done. the iframes are generated dynamically inside the source which I get from external feed.
my jquery is:
$(function(){
$('iframe').each(
function(index, elem) {
elem.setAttribute("width","250");
}
);
});
this code is not being able to set the width of iframe.
and one more thing: I inspected the iframe attributes, and there are NOT editable in browser unlike other css style - which means, my jquery cannot also set it after DOM is ready
what the heck? is there any workaround for this?
$('iframe').each(function(){
$(this).width(250);
});
Docs: http://api.jquery.com/each/ and http://api.jquery.com/width/#width-value
Use .attr, not .setAttribute.
Works for me with
$('iframe').each(function(){
$(this).width( w );
});
http://jsfiddle.net/8e1gz475/
There is a very simple way of assigning "width or height" to any element at run-time, and that's using ".width() and .height()" method of jQuery.
Refer:
http://api.jquery.com/width/
http://api.jquery.com/height/
Here is an example:
<script type="text/javascript">
$(document).ready(function () {
$("iframe").width(500);
$("iframe").height(500);
});
</script>
Example : Regular iframe without updating height and width at run-time.
Example: When you update height and width at run-time.
Here is another stackoverflow question for iframe width where you can find good explanation in the answer if you are using multiple iframes :
Change iframe width and height using jQuery?
try:
$(function(){
$('iframe').each(
function(index, elem) {
elem.css({ "width":"250px !important" });
}
);
});
I wonder why my resizable() jQuery UI function doesn't work on my img.
http://impress-builder.herokuapp.com/home
here is the code: https://github.com/lipenco/impress.js-app
function setResizable(){
$( ".resizable" ).resizable();
}
$(document).on('click', 'img', function(event){
$(this).addClass('resizable');
$(this).css("position" ,"absolute")
setResizable();
return false;
});
Are you sure that you can resize an image directly ? I suggest wrapping it in a div.
http://jsfiddle.net/8VY52/
You can create a div on the fly. Ho, also, you must set the div style="display:inline-block"
I cannot be able to find error in it. but if you can provide me the exact reference as to where is the exact code written on to the page as I cannot be able to explore code on the webpage you referenced. Please elaborate more for help.
Example : $(document).find('.resizable').resizable();
Or directly on to the page through browser Console.
Here's a jsfiddle code with static element : http://jsfiddle.net/coolshivster/eUKhA/
Try Resolving it by placing your jQuery-ui file on to the head or before img.js
So I am using jQuery Masonry and I want to call some jQuery every time it loads posts:
function manipulate(id) {
$(id).each(function(){
if($(this).height()>200){
$('#container2').append(this);
} else{
$('#container').append(this);
};
});
};
So I want to call this function every single time that the next item in the Masonry container loads. This way it manipulates the item in the correct manner. How do I do that?
Update: description of Masonry
Masonry is a Javascript plug in that is like CSS floats forced to fit perfectly + infinite scrolling. It completely hides everything that would not be on page 1 if there was no infinite scroll, and then loads them when necessary. This means that my function will not affect any of the hidden items and needs to be recalled whenever Masonry loads the next set of items so that they appear in the right places. This could mean that without knowing Masonry, it is not necessarily possible for you to solve my problem, but you still can. A the end, Masonry "appends" the items to the Masonry container, and then "shows" them. So I guess what I need to do is append them to the correct containers after they have been appended to the Masonry container, but before it gets shown.
Masonry code:
$(window).load(function(){
var $wall = $('#container');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#entry, #entry_photo',
isAnimated : false
});
});
$wall.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function(newElements) {
var $newElems = $(newElements);
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('.entry').show(500);
});
I have tried putting the function in the Masonry blocks and even as the $newElems function to see if it will work when more images load, but it does not, and in fact somewhat breaks it.
How can I get it to run all the new elements loaded by Masonry through my jQuery so that they get appended to the right container?
You only declared one Masonry instance for container, container2 has no Masonry instance, so it can't infinitely scroll anything.
Also, ($(this).height()>200) will always be false if the image has not loaded yet, it'll default to undefined -> 0 > 200, which is always false. Either you need to wait for the image to load before placing it, or somehow get the dimensions of the image when the content is being loaded. You could hide it by default and place it in container, then on imagesloaded, check the height, and move it to the appropriate container and show it.
Another idea is to bind an action to jQuery's .on() ( http://api.jquery.com/on/ ). on() binds on future elements as well, assuming they are properly attached to the DOM (for example through .append() ). So for example you can bind .click() events, on elements that have not been created yet.
Finally you can do a neat trick and make .append() trigger an event. Then attach a handler for that event to the big container where things are appended, so a function is automatically called. Here is a good example of that on append() do something, and a jsfiddle http://jsfiddle.net/rzRVu/
PS. on a sidenote, I see you function takes as input an ID, but then you call .each(). Id's in html code should be unique.
Update. I missed that you tried to do it properly through masonry, what breaks exactly? I see you are calling .imagesLoaded() on a jQuery variable, is that a plugin?
So using things said on the answers provided, I messed around and discovered how it was done...so the 'appended' part in imagesLoaded just needed to be replaced with the function! It was really a simple answer...I just had to replace this:
$wall.masonry( 'appended', $newElems,{isAnimated: false},
function(){$newElems.fadeIn('slow');} );
with this:
$wall.masonry(manipulate($newElems) ,{isAnimated: false},
function(){$newElems.fadeIn('slow');} );
Problem solved!
I am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?
First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});
$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.