So I have a menu with 3 tabs. In each of these tabs there is a pagination for the related data. However when I go to page 2 in tab2, it reloads the page and by default the first tab is selected. I would need a way to keep the tab i was looking at.
I used the history option like so:
$('.ui.menu .item')
.tab({
history: true,
historyType: 'hash'
});
it requires Asual's Address library
Related
I am trying to do a simple tag that measures the amount of times an element is clicked.
I got into difficulty so I looked to find a video to help because tag manager layout had changed.
I follow the following Free tutorial on Udemy
https://www.udemy.com/google-tag-manager-advanced/
Specifically chapter 8 Button Click - which is a free chapter.
It tells me to setup the following options:
Tag Configuration:
Google Analytics
Tracking ID: {{Tracking ID}}
Track Type: Event
Category: Click
Action: Homepage CTA Button
Label: (blank)
Value: (value)
Then on the trigger:
Add a new one.
Name it - click on homepage button
Add “Just Links”
He ticked the wait for tags
The where it said “Enable this trigger when all of thee conditions are true” he selected
Page Path in the drop down menu.
Now here is where my issue is. When I do exactly the same thing, I only have the following options:
Google Analytics Settings
Page Hostname
Page Path
Page URL
Referrer
New Variable…
Now the new Variable send to to a new window which gives me the following options:
Navigation:
http referrer
URL
Page Variables:
1st-Party Cookie
Custom Javascript
Data Layer Variable
JavaScript Variable
Page Elements:
Auto-Event Variable
DOM Element
Utilities:
Constant
Custom Event
Environment Name
Google Analytics Settings
Lookup Table
Random Number
Container Data:
Container ID
Container Version Number
Debug Mode
So how do I setup the trigger to load on every page and track if someone clicks on the element with a CSS ID of menu-item-6825???
Totally lost on this one.
In your case you need:
1) Go to "Variables" menu in the sidebar.
2) Click "Configure"
3) Enable "Click Classes", "Click ID", "Click Element" variable
After this steps, you need to configure trigger and create condition: Click ID - equals - menu-item-6825. OR condition like that: Click Element - matches CSS selector - #menu-item-6825. Both conditions are doing the same thing.
Drupal 6.28:
I'm re-theming a particular section of a site and the new design called for five pages to be displayed as five tabs on one page with the appropriate one shown when either clicking on the tab itself or in an expanded menu to the left.
I created all that in html and jquery so that I could deep-link the tabs, ie... someone can click on any menu link and hit the page with the appropriate tab open instead of having to go to the master page and then click the appropriate tab. (using location.hash)
This is all working fine, but the last tab is to house content that currently is a view set as a block.
What is the best way to pull that view/block into the html div I have set aside for that specific content?
I have used this great snippet before:
<?php
$block = module_invoke('block', 'block', 'view', '15');
print $block['content'];
?>
which allows one to place any block anywhere, but with a view with a display set as a block, I'm not having any luck invoking that view. Also, I'd had to have to use "php" instead of 'full html' on the node since it's just a snippet but as it's not currently working, it probably doesn't matter.
so, I'm trying to figure out how to have something like this:
<!-- all the other tabs content-->
<div id="fifthTab">
all the content from the view which is set to 'display like a block'
</div>
I'm fairly new to Drupal and not even sure if I create a page display how I would call that data anyway.
So my html structure is:
MAIN PAGE LINK
-sub link/tab 1/default
-sub link/tab 2
-sub link/tab3
-sub link/tab4
-sub link/tab5
So if someone either clicks on on the sub link/tab 5 in the left nav or clicks on the actual tab 5 or enters the url xxx/#tab5, the appropriate tab is show, the rest hidden. That's all working great, I just cant get the view content to show in that tab5.
so a page template based on the url is the easiest. The variable $content is just placed in the last tab and all other html content for that specific page is just put in the template.
At least this way, as docs are added, it's still dynamic and the static info is easy to edit if needed.
Just in case something similar comes up for someone else.
I'm creating a new application using ASP.NET MVC.
I'd like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.
I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.
I'm running into two conflicting issues that I can't seem to find a coherent solution for:
When I click on a tab, I'd like the whole window to navigate to that page, rather than just loading the content into a div. I'm doing this to allow for bookmarking of a particular module. (I'd like the address bar to contain the URL of the current content, rather than just a "main page" URL.)
Currently when I call $("#tabs").tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I'm on nested within itself.
Here are my tab definitions (from the default layout page):
<section class="tabs">
<div id="tabs">
<ul>
<li>Instructions</li>
<li>Questions</li>
<li>Finish</li>
<li>FAQ</li>
</ul>
</div>
</section>
And here's the script I'm using to set them up:
function SetupTabs(sel) {
$("#tabs").tabs();
$("#tabs").tabs("select", sel); // Selects the tab
$('#tabs').tabs({
select: function (event, ui) {
location.href = ui.tab.rel;
}
});
}
This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don't have a usable URL in the address bar (issue #1 above).
Any ideas would be greatly appreciated. I know this isn't the design paradigm for the jQuery tabs, but we're using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I'd like to stick with them for this element, too, if I can make it work.
Thanks
Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you'd like.
I have created a layout in Wordpress with a plug-in called builder. I then have a page that uses this layout. The layout contains a area with tabs.
When the user clicks on a link in my main menu he is taken to this page with the first tab open. Can I change the link to take him to the second tab instead?
Actually the menu looks like this
About us
-Overview
-History
-Contact
If the user clicks on about us or overview I want him to go to the first tab.
I guess you must create something with an HTML anchor OR
$(document).ready(function() {
$('#tabs #2nditemid').click();
});
OR
$(document).ready(function() {
$('#tabs li').hide();
$('#tabs li.2nditemid').show();
});
This may vary a bit but may lead you somewhere
this must be specific only to where you have the tabs... so best is to create a page theme only for this specific page to avoid extra jquery in all pages
I've got an asp.net page containing a Textbox with an Autocomplete extender on it.
It's setup so the user can type a short reference code into the textbox and then choose from the list of matching codes returned by the autocomplete.
On the "select", I then call the server using JQuery. I'm currently using $.get here....
The callback function from $.get checks for "success" and then displays a simple-modal dialog containing info about the item they've just selected.
if (sStatus == "success") {
$.modal(sText, {
overlayClose: true,
appendTo:'form',
onShow: function(dialog) {
$("#ccTargets_tabContainer").tabs();
},
onClose: function(dialog) {
$("#<%=TextBox1.ClientID%>").val("");
$.modal.close();
}
});
$.ready();
}
One of the bits of info being loaded here is a JQuery TABS setup, so the onShow function of the simplemodal is used to initiate the tabs which are within the simplemodal.
Now to the crux of my problem.
If I do multiple consecutive "autocompletes" on the same page it all works fine Unless I have selected a different tab on the tabs in the simplemodal ....If I select a different tab, close the simplemodal and then do another autocomplete I get a JQuery error which seems to relate to a selector doing something with the "old" selected tab that was on the "closed" modal.
I'm clearly missing some sort of cleardown / initialisation somewhere, but can't find what it is. Help?
I've tried "tabs.destroy" before the modal call in the code above and I've tried a $.ready() call as indicated too....
UPDATE: Is it something to do with JQuery Tabs appending my addressbar URL with the selected tab's ID?
I've found the problem.
It's with the "history" script that the tabs plugin normally uses. Obviously as I am continually creating and destroying popups there is no history to speak of - it's all done outside of the normal app navigation.
I've removed the jquery.history_remote script and now it works just great!
Dave