I currently am trying to create a website using Symfony 4. The issue is that one of my pages is in need of a jQuery script to work, part of it is working but functions like these aren't called, why ?
Example of code not being called :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents(); //this is another external function that I don't
//manage to call, even when called in the
//executed part
});
});
I am sure it doesn't come from my javascript as I tested it "off-symfony".
Thanks in advance, Crikripex
Alright, so after hours trying to figure out what and where the issue is, I came to the conclusion (thanks to #fyrye) that there might be compatibility issues between jQuery and Symfony4 or Webpack Encore.
I then decided to "translate" my code from jQuery to Javascript without any library and it worked fine.
To summarize, I went from :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents();
});
});
to :
for(i=0;i<maxId;i++){
document.getElementById("contain_" + i).onclick = function(event){
event.preventDefault();
document.getElementsByClassName("focused")[0].classList.remove("active");
document.getElementsByClassName("focused")[0].classList.remove("focused");
document.getElementById(this.id).classList.add("active");
document.getElementById(this.id).classList.add("focused");
refresh_contents();
}
}
I know it doesn't look as fancy, it's not as easy to code as jQuery, but so far that's the only solution I found that actually works.
Thanks for your help everybody.
Related
I downloaded the jQuery plugin letter-fx (http://tuxsudo.com/code/project/letterfx) and really like what it can do.
However, on my landing page I'm trying to make the different paragraphs appear in sequence. I thought the best way to do that is to delay each paragraph with setTimeout()
I'm a JS/jQuery novice and hoping someone can help me out. Here's the code I have thus far:
$(function(fx1){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
});
$(function(){
setTimeout(fx1,3000);
});
Can anyone show me what I'm doing wrong? Thanks!
Try below code. To use setTimeout you need to pass a function as first param.
$(function(){
var applyAnimation = function(){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
};
setTimeout(applyAnimation,3000);
});
I want to hide the slider (and a bit more) if someone uses the search module on my Joomla site and tried several solutions mentioned here on stackoverflow like: https://stackoverflow.com/a/1760605/1641903
Currently my code looks like this:
<script>
if (/\/search\//.test(window.location)) {
$('#hideonsearch').hide();
}
</script>
I wrapped the slider in <div id="hideonsearch> and tried mentioned jquery in both the body and head (just to be sure), but it doesn't seem to work as you guys can see here.
Any idea on how to get in working?
I saw in your web site that the jquery is not loaded when your code is being executed.
You must put your code in the "onload" function, or make sure the jquery is loaded before doing this.
window.onload = function () {
if (/\/search\//.test(window.location)) {
jQuery('#hideonsearch').hide();
}
};
Or you can use the pure javascript code that is better.
window.onload = function () {
if (/\/search\//.test(window.location)) {
document.getElementById("hideonsearch").style.display = "none";
}
};
I saw another error in your web site now, related to this code:
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
error:
undefined is not a function
And it is related to the same problem, jQuery is not loaded, so you can use "window.onload".
Its probabaly a very old problem I am trying to replace a pop up which is written in jquery mobile 1.0.1 , and jquery 1.6.4. I am currently trying to use jquery mobile 1.3.2 and jquery 1.9.1.
The piece of code I am struggling with changing is as follows
$("select[id='action_menu']").live("change",actionHandler);
to this
$(document).on('click', "(select[id='action_menu'])", actionHandler );
or if anyone has a better suggestion also the look and feel of the pop has changed a lot from the older version.
link to Fiddle with all the js and css files
http://jsfiddle.net/hgafoor/85qy3/
You need to fix your quotes:
$(document).on('click', "(select[id='action_menu'])", actionHandler );
This is how it worked for me, fairly clean and simple credits to Omar for being such a great help.
$("select").on("change", function () {
if ($(this).val() == 'home') {
window.location.href = 'google.com';
} else {
window.location.href = 'mail.google.com';
}
});
I want to have multiple functions to my JS file. Just not sure how to do that, since I'm really inexperienced with JavaScript. Here's what I have.
$(function(){
$('.incentives').hide();
$('.incentives-click').on("click", function(){
$('.incentives').fadeToggle();
});
$('.incentivesB').hide();
$('.incentivesB-click').on("click", function(){
$('.incentivesB').fadeToggle();
});
})();
I'm trying to add a bit that will make an image change when I hover over it.
$(function onHover(){
$(".button").attr('src', 'images/donate2.png');
)}
$(function offHover(){
$(".button").attr('src', 'images/donate1.png');
)}
BONUS
Also trying to get the image (.incentives-click) to toggle when clicked as well. I have an idea about how to go about this, but will appreciate if anyone wanted to help with this as well.
Thanks.
$(function(){
$('.button').hover(function(){
$(this).attr('src', 'images/donate2.png')
}, function(){
$(this). attr('src', 'images/donate1.png');
});
$('.button').on('click',function(){
$(this).toggle(function(){
#change_image1
}, function(){
#change_image2
});
});
});
I wrote a jQuery plugin which does something similar to what you need. You should be able to modify it to suit your needs with minimal effort.
You could also start with one of the jQuery plugin boilerplates such as:
jQuery Boilerplate.com
jQuery plugin boilerplate
My CollapsiblePanel plugin on Github
I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...