So I've got this nice little div button navigation menu setup here FIDDLE and when I try to implement it on BigCommerce it doesn't work. I am running into a problem when I try to add a snippet "%%Panel.ProductDescription%%" into the text.
So this is the code that I amended with the snippet
$("#description").on("click", function() {
$("#content").text( % % Panel.ProductDescription % % );
});
I've tried .text, I've tried using .html, I've tried making it a variable and calling it. I'm out of ideas. Anyone come across this before? Before adding the snippet the code works beautifully. After adding it the code stops working.
The problem is that when you are trying to insert the text %%Panel.ProductDescription%% you are targeting a Bigcommerce template shortcode. Once the template is rendered that shortcode is no longer accessible by any means - including jQuery.
When rendered that panel has the div id "ProductDescription". So your code should look more like this.
$("#description").on("click", function() {
$("#content").text("#ProductDescription");
});
Note, however, that this div has other html in it. Either your jQuery should use .html instead of .text or you should think about targeting a div inside of the description panel.
.ProductDescriptionContainer is what actually holds the description content.
Related
OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
I was trying to follow this question but it's not quite working for me
Load src content to SVG image dynamically
I created some code on jsfiddle http://jsfiddle.net/sLXCr/
Basically, I am trying (but neither seem to work)...is it a selector issue?
$('.graphlink').attr('xlink:href', "#");
document.querySelector('.graphlink').setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#");
This is the minimized version of my code and I am trying to select all of the class="graphlink" as I want to change all the a href stuff to # and then I also after that want to register an onclick handler to all of those a ref that pops up the same modal for all of them(the modal is static information is all).
hmmmmm, I should mention I am using D3 and maybe there is a way to do it with that in that I want to add a class style but I have optional code that runs on some pages and not others to change all the href...maybe that is possible with D3 code instead?
My latest try with D3 didn't work :(
var refs = d3.selectAll('a');
refs.attr("xlink:href", function(d) { return "#"; });
I do see the above grabbing 24 a links but it's grabbing links I don't want but 'a.graphlink' seem to select nothing :(
thanks,
Dean
grrrr, it had nothing to do with that code and everything to do with not posting the whole set of code(which had too much in it I thought)....turns out my code was not in the callback method so it was run toooo soon.
I have a codeigniter that uses twitter bootstrap. At the end of it I have a simple fade in script using jquery:
<script src="http://localhost/b1/js/jquery.js"></script>
<script>
$(document).ready(function() {
$(".content").fadeIn(1000);
});
</script>
the HTML is here.
Now I copied the source from script code over from the page that it is working on to the one that is not working, and suspected 'content' is not declared on the non-working page.
to test this I ran $(".content").length; from the firebug console and the output is: 0 so apparently 'content' does not exist.
I want to pick another css selector to let the fade in script work, so I tried:
$(".html").fadeIn(1000); and $(".container").fadeIn(1000);
It's still not working. Can someone explain what I'm doing wrong and how to pick a selector which will fade in the entire page?
I have portions of the page generated dynamically by php ( codeigniter ) . Specifically, the header, navbar and footer
how about $("body").fadeIn(1000) for the whole page? Note no dot since it's the element name, not a class name.
You don't have a div 'content' in your html so it is never going to find it....
Try doing it on body or html e.g $(html).fadeIn(800) - nb without the full stop at the start
i have a jQuery code and the html code on my page. The code loads two php files on two DIVs, based on the value of a drop down list. The code is working great, loading pic and everything. However I have a small problem.
When I place the second div ( artistdetails ) inside of a seperated div from the first div, the loading pic does not appears on the second but only in the first. Content is appeared correctly though.
As I saw in firebug, the class is loading fine. I even changed the picture to something bigger but nothing was there. ( I mean the pic is not hidden somewhere).
I made a lot of experiment, I set the ID to the float:left div but nothing happens. I really need to have them in a separated DIV. Is that possible?
I would start looking at the final generated code (which you might post here or on pastebin.com with a link).
Sounds to me like something in the php forms is probably not generating valid html. For example, an unclosed entity.
It must work, i guess, if the class is added to <div id="artistdetails"></div>
Still try something like this
$('#artistdetails').empty()
.addClass('loading')
.load('forms/' + val + 'b.php',
function(){
setTimeout(
function(){ $('#artistdetails').removeClass('loading') },
2000);
});