Hi there I am using these shopify tabs in a page, not product description, to get my design.
Here is the link I received the tabs from - https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions
<div>
<ul class="tabs">
<li>Info</li>
<li>Shipping</li>
<li>Returns</li>
</ul>
<div id="tab-1">
content etc.
<div id="tab-2">
content etc.
</div>
<div id="tab-3">
</div>
</div>
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
From this code I am wondering how I can get to a specific tab that is not active from a link on a different page.
If I create a link and have it as:
link To tab
It doesn't load the 3rd tab. Still loads the first one as default.
I've had a look online and can't seem to get anywhere. Is this possible with this code in the above link or will I need to look for something else? My JavaScript is limited and tried to edit it myself from different tutorials online but can't get anywhere.
I am also having trouble keeping on that active tab if the page refreshes. If I am on #tab-3 and the page refresh I go back to #tab-1
Is it to do with this part of the code? I've tried changing it with my limited knowledge and don't get anywhere:
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
Pasted code from comment:
window.onload = function() {
$('ul.tabs).each(function(){
var openedHash = new URL(window.location.href).hash;
links.first().removeClass('active');
content.hide();
active = $('a[href='+ openedHash + ']');
content = $($('a[href='+ openedHash + ']').attr('href'));
active.addClass('active');
content.show();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
Thanks
For get active tab after site reload u can try use new URL(window.location.href).hash
May be some like this
var openedHash = new URL(window.location.href).hash;
links.first().removeClass('active');
content.hide();
active = $('a[href='+ openedHash + ']');
content = $($('a[href='+ openedHash + ']').attr('href'));
active.addClass('active');
content.show();
Related
Ok so I'm trying to make a sub navigation menu that changes the active state of menu items when the user scrolls to the element the anchor link is on. I have managed to get that part of the code working well however I don't want this to occur when someone clicks a link and it auto scrolls them to that section.
So all this code is happening when the user scrolls, if I could disable it when the user clicked an anchor link that would be ideal.
$(window).scroll(function(){
$(".sticky_button").each(function(){
var ele_id = $(this).find('a').attr('href');
check_collision($(this),$(ele_id));
});
});
function check_collision(fixed_element,relative_element){
var sticky = $(".sticky_component");
var fixed_position = sticky.offset().top;
var fixed_height = sticky.height() + 10;
var toCross_position = relative_element.offset().top;
var toCross_height = relative_element.outerHeight();
if(fixed_position + fixed_height > toCross_position && fixed_position + fixed_height < toCross_position + toCross_height){
if(!fixed_element.hasClass("active")){
fixed_element.siblings().removeClass("active");
fixed_element.addClass("active");
return false;
}
}
}
I have a JQuery function that handles hiding and showing of a multiple divs on href push.
jQuery(function() {
//hide element
jQuery(".targetDiv").css("display", "none");
// Hook the button click
jQuery(".showEpisodes").click(function(e) {
// To prevent reloading of page
e.preventDefault();
//toggle and hide all other div tags
jQuery('#'+$(this).attr('target')).toggle('fast', function(){
jQuery('.targetDiv').not($(this)).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="style1">
<span class="image">
<img src="">
</span>
<a href="#/" class="showEpisodes" target="1">
<h2>Label</h2>
<div class="content"></div>
</a>
</article>
<div id="1" class="targetDiv">
<ul>
<li><button><span>1</span></button></li>
<li><button><span>GitHub</span></button></li>
<li><button><span>Phone</span></button></li>
<li><button><span>Email</span></button></li>
<li><button><span>StackOverflow</span></button></li>
<li><button><span>StackOverflow</span></button></li>
</ul>
</div>
This works fine, it's when i try to generate the articles with javascript using json to populate information in the tags that i run into trouble. Just to simplify it, i call a function:
function setAttributes(el, attrs) {
for(var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
function createArticleRow() {
var sectionDiv = document.getElementById('videoElements');
var art = document.createElement("article");
art.setAttribute('class', 'style1');
sectionDiv.appendChild(art);
//for images
var span = document.createElement("span");
span.setAttribute('class', 'image');
var image = document.createElement("img");
image.setAttribute('src', 'coverUrl');
art.appendChild(span);
span.appendChild(image);
var href = document.createElement("a");
setAttributes(href, {"href": "#/", "class": "showEpisodes", "target": "1"});
art.appendChild(href);
var h2Tag = document.createElement("h2");
h2Tag.innerHTML = 'title';
href.appendChild(h2Tag);
var divcont = document.createElement("div");
divcont.setAttribute("class", "content");
href.appendChild(divcont);
var h3Tag = document.createElement("h3");
h3Tag.innerHTML = 'description';
divcont.appendChild(h3Tag);
}
function createDivRow(){
var sectionDiv = document.getElementById('videoElements');
var infoDiv = document.createElement("div");
setAttributes(infoDiv, {"id": 1, "class": "targetDiv"});
// infoDiv.setAttribute("class", "hide");
var trailerVideo = document.createElement("iframe");
setAttributes(trailerVideo, {"width":420, "height": 315, "src": "embededTrailerLink"});
infoDiv.appendChild(trailerVideo);
sectionDiv.appendChild(infoDiv);
}
createArticleRow();
createDivRow();
jQuery(function() {
//hide element
jQuery(".targetDiv").css("display", "none");
// Hook the button click
jQuery(".showEpisodes").click(function(e) {
// To prevent reloading of page
e.preventDefault();
//toggle and hide all other div tags
jQuery('#'+$(this).attr('target')).toggle('fast', function(){
jQuery('.targetDiv').not($(this)).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="videoElements" class="tiles"></section>
For some reason this is working fine. But when I run this, the hrefs manually inputted work fine, but the generated html opens a new link with the same html page.
I feel like my problems have something to do with the href tag "#/" but i've tried many variations. I also thought that the might be some ordering issue with my import scripts.
I have opened up the elements console in a browser and the two are identical structurally, and both can access jquery.
Has anyone had similar experiences with this?
I have an image gallery and inside each image I have a div with the image name. When I click on an image a modal with some details is opened and the div with the image name is changed by the div with the tools.
What I want is that when closing the modal (just click outside it) everything returns to the original phase ie the div with the name replaces the div with the tools.
Javascript
$(document).ready(function() {
var toolbar = $('.ImageButtonsG').html();
$(".d-block").each(function (index, value) {
$(this).on("click", function(){
var default_title = $(this).find('.ImageText');
$(default_title).html(toolbar);
$('.ImageButtonsG').empty();
});
});
});
I found problem with your JS code. Here is the updated code:
$(document).ready(function() {
var toolbar = $('.ImageButtonsG').html();
$(".d-block").on("click", function(){
var default_title_ele = $(this).find('.ImageText');
var default_title = $(default_title_ele).html();
$(default_title_ele).html(toolbar);
$("#myModal2").on('hidden.bs.modal', function () {
$(default_title_ele).html(default_title);
});
});
});
Here is updated codepen.
I hope it will solve your problem.
Edited:
Below js code generate a modal like this
but sometime it fails.And it look like this
So i want a solution for that problem
This is the html structure
<div class="col-sm-4">
<div class="gallery-item shad" style="height : 100px; width:143px;">
<a href="#">
#if(empty($service->image)))
{{HTML::image('image/no-image.png',null,array('style'=>'height : 100px;'))}}
#else
{{HTML::image('image/'.$service->image,null,array('style'=>'height : 100px;'))}}
#endif
</a>
</div>
file.js
/* copy loaded thumbnails into carousel */
$('.gallery-image img').on('load', function() {
/*this section execute when i reload the page*/
console.log('not working');
}).each(function(i) {
if(this.complete) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parent();
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i==0){ // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval:false});
/* when clicking a thumbnail */
$('.gallery-image').click(function(e){
e.preventDefault();
var idx = $(this).parents().parents().index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
this code works when i load the page for very first time but when i reload the page and click on the image this code is not work working
I can understand that you are setting the contents of the modal window on the first few lines of the JavaScript. Try to set it in the click event:
$('.gallery-image').click(function(e){
e.preventDefault();
var idx = $(this).parents().parents().index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
// Update the modal window contents here.
});
Finally i have find a solution
$('.carousel-inner').find('.item').first().addClass('active');
/* when clicking a thumbnail */
$('.gallery-image').click(function(e){
e.preventDefault();
var idx = $(this).parents().parents().index();
var id = parseInt(idx);
$("#myModal").modal("show");
$('#modalCarousel').carousel(id);
});
I'm trying to prevent default links, because I'm dynamically loading pages into divs with jQuery, and the href for each like is just the name before the page (e.g. href=home, and fixing to load to home.php in code below).
//initialize home page as active on load up and deactivate link
var activePage = $('a[href$="home"]');
var activePageHref = activePage.attr('href');
activePage.attr('href', '#');
$('a').click(function(e) {
e.preventDefault();
//set the page clicked on
var page = $(this).attr('href');
//check to see if there are any extras to url for php
var pageCheck = page.split('?');
//sort page type
if (pageType == null) {
//dynamically load the page in div bodycontent
$('#bodycontent').load(page + '.php');
} else {
$('#bodycontent').load(page + '.php?' + pageCheck[1]);
}
//pull up last disabled link for navigation
var setOld = $('a[href$="' + activePageHref + '"]');
setOld.attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = page;
//make link inactive
$(this).attr('href', '#');
});
It was ok with return false at the end until I added MORE things I needed to happen in the click event function, but to be exact, this part:
//pull up last disabled link for navigation
var setOld = $('a[href$="' + activePageHref + '"]');
setOld.attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = page;
//make link inactive
$(this).attr('href', '#');
Now the e.preventDefault();, which is from what I understand the correct way of doing what I need to happen, is stopping the entire thing from firing on any links. I'm stuck. I just need to stop default action, and use the function I've built with the extras at the end I've added to make my navigation pretty.
Also to add, I do have a hover function tied to the ul of this navigation, but didn't include it as it shouldn't causing an issue, but I can put it in here if needed. That is the only other thing in this document ready function.
Updated:
Since you change the disabled link's href initially, the attribute-contains selector won't be able to find it again later on to activate it. I would suggest doing this a little bit differently.
You can capture the entire 'disabled link' functionality by using classes. If you add a class to links which should be "disabled" you can prevent the browser from following only links with that specified class.
When you click on an "enabled link", follow it then make it disabled. Then, enable all other links.
$('a').click(function() {
$(this).addClass('disabledLink');
$('a').not(this).removeClass('disabledLink');
}
Then, set up an event listener for the whole document which prevents the default action on links with a certain class.
$(document).on('click', 'a.disabledLink', function(e) {
e.preventDefault();
}
This should achieve what you want as is (i.e. it would replace your entire 'click' handler above). Note with this the href will never be changed to '#'.
Otherwise: just cache the link itself along with its href
//pull up last disabled link for navigation
activePage.attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = $(this);
activePageHref = $(this).attr('href');
//make link inactive
$(this).attr('href', '#');
You have a syntax error which is causing the JS engine to halt:
//pull up last disabled link for navigation
$('a[href$="' + activePageHref + '"]').attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = page.attr('href');
/* THIS HERE RETURNS A STRING SO YOU CHANGE activePage to a string. */
// Should probably be:
activePageHref = page.attr('href');
//make link inactive
activePage.attr('href', '#');
Befor you invoke this method you set activePage to be a string, which has no method .attr() so it throws an error and execution of the function stops.