I'm having a little trouble controlling the visual display of my filtering tabs and pagination links using Isotope. I want to fix two issues:
1 How do I class one of my filtering tabs so it looks already selected on page load?
2 When I click on a pagination link in the container, the currently selected tab is declassed, meaning it no longer looks selected?
Please see the demo here andym.ca/designs/isotope/tester4.html and you will understand what I mean.
Regarding the first question; before the code of your Isotope logic proper, you could have this anonymous self-executing function to preset certain things
(function(){
var selector = $('.classtobefilteredoutonload');
$container.isotope({ filter: selector });
// other things that shall happen too go here, like assigning the right class to you PMTV tab div
return false;
})();
Or failing that, leverage hash history to preset your site.
Regarding the second question, it looks like you're using this CngClass function to toggle the focus for all your clickable "a" elements, so naturally Archive Videos will lose focus when you click on a pagination "a" element. You can see it well in Google Chrome's developer tools while clicking on your tabs and paginators.
Well, you should toggle a "highlighting class" on your pagination separately, with a different function from the one that toggles your tabs. An anonymous self-executing function executes as soon as it is encountered, so it looks like the rest of your DOM is not ready. Try the same function but with on document ready.
You can do it like this.
You can pre-mark your tab or whatever item on screen like this
Related
I'm wracking my head here. Slider works, that's not the issue. I've been ask to add event tracking to the arrow. So not on a slide change as the KPI is which arrow. So did the user click left or right.
This does't work:
$('.slick-arrow').on('click', function () {
var $this = $(this),
$ariaLabel = $this.attr('aria-label');
console.log('button');
});
The arrows are default, though I changed the css. Is there another way to track arrow clicks?
I think this will help you track your button.
In GTM, create a user-defined variable of "auto-event variable" type and value would be the "aria-label" attribute like so:
Then create a trigger for the arrow clicks, you already have the right idea for targetting the element using the CSS classes, but this can be done in GTM, like so:
Note, if you don't see the "Click XXXX" variables, you can enable them under the "built-in variables" section in the variables screen.
Next create the event tag, you'll go to the tags page and create a new tag of type Google Analytics, then pick "event" for track type and fill in the category, action and label as you wish. Note, here I'm using the variable we created in the first step as the label, but you can put it anywhere to identify what kind of arrow it was. Make sure to also pick the trigger we created earlier as the trigger for this tag as well.
After this is all done, put the container in debug mode and you should see the tag fire and register an event in GA.
I want to trigger a tag when a link with a certain css class is clicked. I create a trigger based on Clicks > Just Links, but when I go to select the variable, I just get "Page Hostname, Page Path, Page URL, Referrer, New Variable"... no "Click Class" as one would expect.
All the online help shows an outdated version of GTM that don't match the options I see. Even the GTM help docs are outdated.
How does one trigger by css class? (I tried using a custom variable, but didn't work either, and honestly the options didn't make much sense either).
Update: It works if I create a new custom variable "DOM Element has CSS selector" and then go to Trigger, select my custom variable, select "Equals" and enter the text of the link.
But this doesn't make much sense to me, all I want is trigger based on css class, not by the text contents of the tag.
Turns out GTM's "Click Element" built in variable (and many others) is off by default, that's why it was missing from the trigger dropdown. One has to go to Built In Variables > Configure > and tick the "Click Element" variable.
Why would they turn this off by default and offer no clues in the UI, I have no idea.
I've worked thru the various jquery UI demos of drag and drop and sortable. These show how to get items from one list to another. One example even shows a shopping cart demo.
Am I missing something in that a item won't be part of a post to the server right? so what use is this other than reorganizing a display on a page?
Is it possible to adapt this to some sort of input field?
TIA
J
item won't be part of a post to the server right? so what use is this
other than reorganizing a display on a page?
Allowing users to reorganize the elements in the page is a nice feature, even if you aren't notified on the server. For example, by allowing users to drag and drop elements, you may store his current page layout in localStorage so that the next time the user visits your page, the layout is restored automatically. You don't need to be notified on the server side what the user preferences are.
All of these jQuery plugins (sortable, draggable, etc.) have functions that you can hook into and trigger some server side processing as well. For example, when a user drags and drops an element from one section of the screen to another, you can perfectly make an ajax request and do some processing on your end. This would provide a very nice user experience to the user.
For example:
$( ".selector" ).droppable({
drop: function( event, ui ) {
$.post('http://server/somection',data{...});//do something on the server-side
};
});
Absolutely! jsfiddle with demo here.
I am looking to control the visibility of a div on one page from a toggle button on an admin page. I have seen many examples of this being done on the same page but none that explain what it would look like to have this done from another page.
There are a number of ways to handle this. You should research what you want to do and then decide on a method that works best for you.
Personally I would look at a server-side implementation. In this way you can control the output to the client. You can use session variables for example. How this is done will depend on what language you are using.
If you only want a javascript solution then I can think of two options. First is to use cookies. You can then read the cookie and show/hide the div based on the value. This is what I would do.
Second you can pass in a querystring parameter and read it on the other page. Then hide/show your div. http://mysite.com/?div=hidden
If the admin page opened the child page using JavaScript then you can assign the window to a variable and control the contents through that variable. Like so:
var childWindow = window.open('some URL', options);
// now toggle the div in the child
var childDiv= childWindow.document.getElementById('your_div_id');
$(childDiv).toggle();
I have a small tabbed navigation setup using CSS. When hovering over the tabs the colour changes, great. However when i click a tab and it navigates to the corresponding page, i would like that tab (the active tab?) to remain highlighted, indicating the current page.
I am currently doing this by using a class (.currenttab ) and then using this class in each HTML file. I am not using:
active
Is there a way for me to use active, rather than using a class in each individual HTML file, or is what i am doing correct?
Thank you in advance.
What you are doing is correct. The :active pseudo selector means something else - the event of activating a control (ie, the time between a user presses the mouse button and releases it).
Using a class to signify the selected item is the way to go.
It's far from ideal, but if you give every page and every tab an id, you can define the highlighting in css instead of html. I ran across a full explanation while looking up the active attribute:
Highlighting Current Page With CSS
A site I designed with this technique (pages, not tabs)
Here are some more examples brainjar Demo
More from Brainjar