So have a block of toggles on my page and now I need to add another block of toggles on the same page but this one with the first toggle active/open by default.
I've been working around the JS but no luck so far so I need your precious help to get this to work.
Thanks!
Demo
Javascript
jQuery(window).load(function(){
$('.toggle-view li').click(function () {
var text = $(this).children('div.toggle-content');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('<i class="icon-minus"></i>');
} else {
text.slideUp('200');
$(this).children('span').html('<i class="icon-plus"></i>');
}
$(this).toggleClass('activetoggle');
});
});
You can do it with something like:
$('.added_class_on_second li').eq(0).children('.toggle-content').show();
Just add another distinct class to the second, or target it with:
$('.toggle-view').eq(1).children('li').eq(0).children('.toggle-content').show();
if you don't want to change the html at all.
http://codepen.io/anon/pen/CDdlH
If you need the first section to be open when the page loads you could simply call click() on $('.toggle-view li').first(). However, this may have undesired side effects if you have other actions occur on click, and it will perform an animation, so consider creating a function open which does nothing but open the indicated section, and calling that on document load.
Related
I have a block of working code that allows me to shift from one set of colored items to another based on a span click event that runs in jQuery. I am using wordpress and it requires I spell out jQuery instead of using '$'. In part, it works by moving a variable to the active selection and changing a variety of other properties based on defined variables in the html of that 'span'
I tried changing .click(function f()... to .touchstart(function f()... and it doesn't work when I load the site on mobile. If you think you know the answer, cool. I will now list things I have tried.
This is what my click function looks like:
jQuery(document).ready(function f($) {
jQuery('.changecolor span').click(function f($) {...
});
});
Attempts:
jQuery('.changecolor span').touchstart(function e()
jQuery('.changecolor span').on("tap", function e() {...
My cache is set to auto clear every time I save a new change in, and I've tested this.
$('.changecolor span').on('touchstart',function(ev) {
$('your seletor').trigger(ev);
});
Is there a way to disable the onclick function but still use the href to re-direct the user to the requested link. Example a header menu there are many links that looks like below :
Phones
I am unable to remove the "DA_A('id', ':per:shop', this.href); return false;" from the HTML page. However using a tag manager how would one go about injecting a snippet of JavaScript code function which will de-activate/mute the "DA_A" function but still make the link work as normal? Is it possible? It seems the function "DA_A" is a function that calls another ".push" function and pass some data.
What are my options? as I am unable to edit the menus in questions?
You can probably remove the onclick from the element if you can run some javascript after the DOM renders:
var anchor = document.getElementById("someId"); // or tagname, querySelector, etc
anchor.onclick = "";
You could also disable the function it calls altogether, depending on whether it is needed elsewhere:
window.DA_A = function() { /* do nothing */ };
The first snippet would need to be run after the DOM was rendered (for example, if you are using jquery then enclose it in a $(function() {})), and the second snippet would need to run after the DA_A function is defined in the first place.
Either of these by themselves should disable the onclick, but still allow the anchor to navigate.
this code snippet will do the trick:
window.onload = function()
{
document.querySelctor("a").removeAttribute("onclick"); // make selector more specific
};
I have a page that forces some JS to load on a page that I need to override. I can load a separate JS file to do this. I want to have the page do the .show for any of the .below-the-folds on the page. I guess the best way to say it is, I want all the "more" things on the page to be expanded when the page loads, rather than making a person click more to see what's below the fold on all these.
This is the JS I need to override, I can't change it since it's loaded by the app automatically. There can be more than one of the lists hidden, I'm not sure how much harder that makes things.
function MoreFacets($more_facets_div) {
this.$more_facets_div = $more_facets_div;
this.bind_events();
};
MoreFacets.prototype.bind_events = function() {
var self = this;
self.$more_facets_div.find('.more').on('click', function (e) {
$(this).siblings('.below-the-fold').show();
$(this).hide();
});
self.$more_facets_div.find('.less').on('click', function (e) {
$(this).parent().hide();
$(this).parent().parent().find('.more').show();
});
};
$(function() {
$('.more-facets').each(function() {
new MoreFacets($(this));
});
});
It's loaded on the page and the HTML looks like this:
<h3>Additional filters: </h3>
<dl id="facets">
<dt>Collecting Area</dt>
<dd> Here's Something in the list</dd>
<dd> Here's the last in the list</dd>
<div class="more-facets">
<span class="more btn">∨ more</span>
<div class="below-the-fold">
<dd>Something That's hidden is here</dd>
<dd>Something more in this hidden list</dd>
So when the ∨ more is clicked is when the others below-the-fold appear, and that's what I want to load when the page loads. There's usually a few different lists like this on the page.
So I'm thinking what I need to do is something like run the ('.below-the-fold').show() for all the lists when the page loads?
Update A note to clarify: when the page loads now they're all hidden. I'd like them to all show when the page is loaded so no one has to click anything to have everything showing.
Another note based on another question below... It's loaded in a separate file, and I can load my file before that one. I do know that I can override other JS on the page, so I assume I can override this as well.
Based on your last edit, it sounds like you're already onto the fastest solution to your problem.
Please note, this will only work if the script is not loaded asynchronously, but if you have control of the order the scripts are loaded in, you can insert your script between the problem script and jQuery.
Your script can be something as easy as redefining the function it's using to something like this:
MoreFacets.prototype.bind_events = function() {
var self = this;
//Autostart in our open state without completely disabling the functionality
self.$more_facets_div.find('.below-the-fold').show();
self.$more_facets_div.find('.more').hide();
self.$more_facets_div.find('.more').on('click', function (e) {
$(this).siblings('.below-the-fold').show();
$(this).hide();
});
self.$more_facets_div.find('.less').on('click', function (e) {
$(this).parent().hide();
$(this).parent().parent().find('.more').show();
});
};
Now, that won't work if you don't have control over the script loading, but you might have hope even in that case, because document ready functions in jQuery are invoked in the order they're registered, so if you can't really control where your script is you might play with an alternative
$(function() {
$('.more-facets').each(function() {
$(this).find('.below-the-fold').show();
$(this).find('.more').hide();
});
});
The first will be cleaner, but the second is a fallback for more restrictive situations, and both should achieve your desired effect without completely removing the functionality, just changing the default state on load.
I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/
I'm trying to write a function that hides some text that overlays a video placed on the page through MEJS (the core wordpress integration).
I'm displaying it through the wp_video_shortcode() function, so I'm not actually having to write any JS to get the player to display etc.
I've tried writing a bit of poor code that just checks for a click on the containing div and hides the text, then another click shows it. But I feel like I should be doing something a bit more elegant than that.
Any ideas?
Here's the code I have so far:
$('.wp-video').on('click', function() {
if( $('.video-title').is(':visible') ) {
$('.video-title').fadeOut('2000');
} else {
$('.video-title').fadeIn('2000');
}
});
you can use jquery toggle function to avoid extra "if" statement
$('.wp-video').on('click', function() {
$('.video-title').toggle(2000);
});