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();">
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
This is a little hard to explain. I'm creating a webpage that shows how other webpages will render in the browser. Here's a simplified version of the problem I'm having...
<div id="test">This is an example of page 1</div>
<div id="test">This is an example of page 2</div>
As you can see, both divs have the same ID. I can't change the ID in my situation and it's causing problems. I'm having various other CSS and javascript problems also. Each section of code is conflicting with the other. So, I was looking for a way to have a section render independently of everything else. One way to do it would be to create an iframe for each section of code. But that would require me to create a separate webpage for each section, right? Or, is there a way for an iframe to work just by entering code into it, rather than a URL.
You can only have one id per element in an HTML document. So each div must have a different id, otherwise you will run into problems. If multiple elements need to have the same name, you can use classes <div class="test" id="unique-id"></div> and then <div class="test" id="another-id"></div>.
To answer your question with regards to iframes, yes, you need a separate page for each iframe. It is not possible to write code within the iframe tags to execute separately. See the iframe spec.
Edit: After reading the iframe spec myself, it appears you can use the srcdoc attribute to overwrite what is in the src attribute, but it looks like this isn't entirely accepted across browsers. MDN has more information about the attribute.
I know nothing about JavaScript (the main reason I chose to use Skrollr), and have been having issues with getting Skrollr working. I put this code at the end of my webpage:
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
Then I went to work. To test, I added the animation shown in the Skrollr documentation, where the text changes color, using this code:
<p class="lead" data-0="background-color:rgb(0,0,255);" data-500="background-color:(rgb255,0,0):">Blah blah blah.</p>
I upload it, no results. So I tried taking out the class, I'm a pretty mediocre coder at best, I just play with stuff, so I don't know if what I'm trying to do isn't possible. I think the class and the data- are conflicting. So I reupload, and by jove, still nothing. What's up with this? Here's a link to the page (I was testing Skrollr on the first section, the text that begins "An introductory studio course..."): http://jonathanalumbaugh.altervista.org/courserequests/photographyone.html
I'll also note that I want to use this to make the circled images expand from nothing to the size they are, kind of make them pop out as you scroll along, and make the "JA" cover image parallax scroll. But I want to get this thing working first. I'd also like to get the smooth scrolling thing turned but I have no idea where to do that. Probably a really simple question, so apologies in advance for the stupid questions.
I'm not sure whether I should ask another question for this or not, but once this does work, is it possible to animate stuff that already has a class applied to it, like I tried to do with <p class=lead data-0="background...?
I FORGOT TO ADD: Dreamweaver says "there is a syntax error on line 1 of skroll.min.js. Code hinting may not work until you fix this error." I don't know why, I haven't touched it. The first line of skroll.min.js says <!DOCTYPE html>.
You have mistake in this code (rgb), correct should be:
<p class="lead" data-0="background-color:rgb(0,0,255);" data-500="background-color: rgb(255,0,0)">Blah blah blah.</p>
I've searched around the web for a solution to my problem and im getting pretty close to my desired design with Accordion JQuery but..
I have some extension to the JQuery template which I dont know how to implement, so here it goes:
This is how my Div looks when you enter the webpage:
When you hover over either the picture or the title/text the text will be underlined and italic so that the user know the feature with cliking on it.
What I would like see if the visitor clicks the picture/text is this:
This is my HTML for that specific Div
<a href="#">
<div class="newsbox">
<img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
<br />
<p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
<div class="vertical_accordion_toggle">
<p></p>
</div>
</div>
</a>
Code:
http://jsfiddle.net/VCDe2/1/
Appreciate any hints/tips!
Here's a JSFiddle to show you what's happening.
jQuery:
$('h1').click(function(){
$(this).next('.hidden').slideToggle();
});
Simple enough! Adaam's fiddle in the post above certainly does work, but I'd recommend not using it as it will only work for one item - you'll need to add more code for every new section you create.
This solution, however, will look for any h1 item when it is clicked, and then find the next .hidden class item closest to it, allowing you to add as many different areas as you want.
For instance, with the same code above, you can scale everything up to work like this with no extra jQuery script.
All you have to do to incorperate it into your project is make sure your .hidden equivalent is nested inside of a container with the rest of the section, and change h1 and .hidden to fit your proper classnames. Make sure they're classnames, as IDs will not work.
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.