Why is jQuery.css() not working for me? - javascript

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.

Related

DOM change - no effect. Effect visible only if changed with timeout

Weird problem. I'm modifying shop template:
https://demo.themeisle.com/shop-isle/product-category/clothing/dresses/
At this moment when you hover product's picture there will show "add to cart" button. This is .
Under picture there is price
I prepared code:
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
Nothing happens. This code work only if I set timeout:
setTimeout(function() {
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
}, 10000);
Of course timeout it's not a solution. I was trying to find out minimal time to obtain best behavior but it's impossible. I have feeling that every browser (and version...) needs personalized time setting.
I thought that after 24-hour break I will get some brillant idea, but that doesn't work, no more ideas.
--- EDIT ---
OK, thanks for pointed mixed common js with jquery - I will correct that later.
jQuery(document).ready(function(){
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
console.log(el);
});
});
That's logical that var from should be inside ready but this still doesn't work. No effect.
If I use in loop console.log it will return for me html code of el.
--- EDIT ---
Thanks. While testing I noticed something. I wanted append element .woocommerce-Price-amount.amount to element .product-button-wrap. But how can I do that if element .product-button-wrap isn't originally in source? This object is created dynamically (I don't know how).
-- EDIT --
OK. I checked JS files and found code adding to DOM .product-button-wrap so I putted my code there and now everything works. Thanks for help.
The problem is because you're running your code before the DOM has loaded. You need to retrieve the elements within the document.ready event handler.
Also note that you have an odd mix of native JS and jQuery methods. I'd suggest using one or the other, like this:
jQuery(function($) {
$('.woocommerce-Price-amount.amount').each(function() {
$(this).parent().parent().find('.product-button-wrap').append(this);
});
});
Also note that .parent().parent() should be replace by a single call to closest(), but I can't give you an exact example of that without seeing your HTML.

Equalizing within tabs Foundation 6

I can't figure out how to get it to work. The documentation seems a little sparser than last time and doesn't include examples. Any help would be appreciated.
http://foundation.zurb.com/sites/docs/equalizer.html#applyheight
$('.tabs').on('change.zf.tabs', function() {
// Trying to trigger equalizer to equalize
console.log('test'); // This is working
});
Update - I think this might be closer, but it's still not working
var elem = new Foundation.Equalizer($('.parent-row'));
$('.tabs').on('change.zf.tabs', function() {
elem.applyHeight();
});
Does your content equalize if your browser is resized? If so, you can try to force it on tab selection by adding Foundation.reInit('equalizer'); in your change.zf.tabs event handler.
Please note: I'm experiencing similar issues and found this to work..but it may not be the most optimal.

Struggling with onmouseover and onmouseout

I am struggling with onmouseover and onmouseout.
Every site I have been to shows this syntax almost exactly. I practically copied pasted it from Mozilla. The problem I’m having is that it calls the largeDiv and smallDiv functions immediately. (Eventually, I am hoping to apply a new class to the div when during the mouseover event, and return to the old class when mouseout.) I am pretty sure that my mouse events are to blame. I was also wondering if my onload function caused any problems, but when I commented it out, the only thing that changed was the small div did not load, as expected.
I tried to use an event listener, thinking I wasn’t calling the event properly, but that did not work at all, although I am not sure I coded it properly, and didn’t spend more than an hour on the damn thing! I have tried numerous tweaks, camelcasing onmouseover, using parenthesis, etc… Anyway, here is the code:
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();
I coded this in my browser and when I copied it to jsFiddle to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on CodePen and it worked as I have described. Not sure what caused this but this is the second time this has happened.
By the way, if you go to CodePen or jsFiddle, I know my design skills are lacking. I am just doing this for a playground, and for a place to keep code that works, like a notebook. I promise you it will get much much worse.
As always, any help is appreciated.
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions
Please go to following fiddle i have made some small changes and its working fine for me
fiddle
Also You could have used
<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
Mouse over this text
</div>
See working example here fiddle 2

Manually Advancing Orbit Slider

I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?
Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');
The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.
I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.
I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});

Open links in div container in JQuery Mobile

i have a multi-column layout where "#content-primary" is the div i want the actual content loaded, and "#content-secondary" holds a generated listview of links(effectively a navigation menu).
I'm using this code to change the page, pretty much following the JQM Docs, however the browser is following the links to entirely new pages, instead of loading the content from them into the "#content-primary" div. There's obviously something I'm missing.
$(function(){
$('#menu a').click(function() {
$.mobile.changePage($(this).attr('href'), {
pageContainer: $("#content-primary")
} );
});
});
Using Django on the backend, but it probably isn't relevant.
I finally found an answer here. JQuery Mobile's changePage() and loadPage() methods do too much post-processing and triggers a lot of events that really makes implementing your own dynamic loading more complicated than it should be.
The good old fashioned #("div#primary-content").load(); works, but I'm still struggling to apply JQM styles to it.
interestingly, this contradicts with this:
$.mobile.changePage() can be called
externally and accepts the following
arguments (to, transition, back,
changeHash).
And when tested this works: $.mobile.changePage("index.html", "slideup"); but this does not:
$.mobile.changePage("index.html", { transition: "slideup" });
Perhaps documentation is not quite right?
Update to the new beta 1 release

Categories

Resources