I am facing a problem of dynamically adding a jquery mobile collapsible element. I have the following JSFiddle. There have been lots of questions similar to this one but I am not able to get the hang of it. I hope that someone would help me out as I am new to Jquery and finding it a bit confusing at times.
Link to JSFiddle
<html>
<body>
<div id="collapsiblelist" style="width:400px;height:600px; display:inline- block;float:left">
</div>
</body>
</html>
Javascript code:
var coll=document.getElementById('collapsiblelist');
$(coll).append('<div data-role="collapsible-set" data-theme="b" id="collapsible-set" data-ajax="false"></div>');
$('#collapsible-set').append('<div id="collapsible1" data-role="collapsible" data- collapsed="false" data-ajax="false" data-theme="b"> </div>');
$("#collapsible1").append('<h3>first element</h3>');
$("#collapsible1").append('<p>I am the collapsible set content for section 1.</p>');
$(coll).trigger('create');
The problem is that it appears on JSFiddle but not on my mozilla browser.
I have the same code.
Please inform me if i am missing any javascript files.
Thanks in advance
Don't use more than one jquery.js files. There could be a potential for code clash and elements may not be rendered even if your code is logically correct. Hope that helps anyone out there. Thanx guys
Related
I would like to ask you for help with bootstrap scollspy. I implemented first one in my project it is working fine and I am happy.
Problems started when I wanted to add another, different ID, different target. I added it in the same way but I cannot get it to work.
I googled about this but I couldn't find solution or proper informations, I saw some posts that there should be only one scrollspy on "body" I tried to experiment with that knowledge but still nothing.
My code:
<div id="back-button">
Back
</div>
<script>
$('body').scrollspy({ target: '#back-button' });
</script>
<div data-spy="scroll" data-target="#projects" data-offset="0">
CONTENT HERE
</div>
I tried to change order, change IDs to Classes, move scripts around but still nothing. Can you please help me?
Thanks and Cheers
I had help with my previous question to be able to create changing navlinks with my navbar with JavaScript. Now I need to make the buttons be created automatically within the same JavaScript. This is what I had, this is what the code creates, with CSS and html output. http://jsfiddle.net/k35wawyg/2/
What Should Happen
What should happen is the buttons appear above each other in the top right, but it seems that it doesn't work. Also, the buttons should be linked with the JavaScript src that would be inside the HTML with
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js">
</div>
What Actually Happens
As you can see in the JSFiddle, they are under the NavBar, across from each other, and clicking it will make it output a console error with:
Uncaught ReferenceError: execFunction() is not defined
Please help. I rewrote the question due to a JSFIDDLE request.
I think you had a number of problems in your fragment. I have modified the code and here is a new jsFiddle that now seems to work. Because there were so many things I changed, I can't list them here but if you compare the new code to your existing code, hopefully it should become clear.
jsFiddle
Probably the biggest change was the way that the functions were invoked:
<a onclick="execFunction2();">
I'm trying to add 3 buttons to the header of a mobile web-app i am making with jQuery.
I am able to make 2 buttons but as soon as i put the 3rd on the header the first dissapears :/
i tried the answer in this question: Adding many buttons to header in JQuery Mobile
however for some reason jquery style's will not apply to div tags inside the header.
my header currently has this code:
<div data-role="header">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
</div>
<h1 id="usr"></h1>
Profile
</div>
and my webpage looks like this:
Does anybody have any ideas why this is happening?
please excuse any grammar/spelling mistakes: I am dyslexic and may have missed some in proof reading
okay so thanks to #TSV who pointed out i was using "data-roll" not "data-role"
that actually fixed my problem completely :)
I have an issue with an external link to a specific layerslider slide (html version, NOT wordpress).
This is the web page:
http://www.jeeltcraft.com/sogea/HTML/slider.html
I asked in the support forum and they told me to use this javasript:
Some text
Which of course you can find in the layerslider documentation page:
http://www.docs.purethemes.net/sukces/layerslider/documentation/documentation.html#deeplinking
but I'm a total newbie about javascript and I cannot get the link working, the worse part is.. I can't understand how this javascript refers to the layername I put in the style"deeplink: layername;" of the layer I want to link; i guess it uses an index number and in the docu you can see that maybe index numbers have to be written on a variable...
The javascript link is located on the "primary-menu" element of the first page i linked, can someone please help me?
Any help will be appreciated gratefully
you can use html) Just write <p><img src="/image_part/image.jpg" border="0" alt="" /></p> PS. From Russia
If you never got this figured out it is because of the $
I ended up using jQuery in place of $ and changed javascript:void(0); to only javascript:; and it works as expected.
I got a problem about magento bundle products here. The price won't get updated everytime I make come options change on the products. And I also can't add it to the cart. I've spent several days to find the problem and finally I realize that the problem comes from this addthis snippet that I insert
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e770a31017c7f26"></script>
<!-- AddThis Button END -->
I put that addthis snippet on my default/template/catalog/product/view.phtml files. I guess it might caused by some conflict between magento's default theme script with the script from addthis.
Can anyone help me on this?? or maybe give me a better alternatives other than addthis
thank you very much :)
I had same problem! Try replacing
<a class="addthis_button_tweet"></a>
with:
IFRAME snippet available from https://dev.twitter.com/docs/tweet-button
That should work! :)
I have always been a 'seeder' of stockoverflow, get the information i need then bolt. But i thought id share this little tid bit.
Simple tweak i found it in a slightly different place.
"app/design/frontend/default/MYTHEME/template/ajax/catalog/product/view.phtml"
i just commented out <a class="addthis_button_tweet></a> from there and BOOM.
you have no idea the lengths i went to before finding this. Thanks
For people looking to solve this problem, i tried just about everything i could find, modifying option.phtml, effects.js, scpoptions.phtml, produt.js etc... and all along it was twitter