Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i have this html code here for my main menu:
<div id="main-container">
<div id="main-wrapper">
<div id="logo">
<h1 id="title">portfolio</h1>
<h2 id="ready">ready</h2>
</div>
<div id="selection">
<ul>
<li>about</li>
<li>resume</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
So what I want to do is add some animation to my website. For instance, when i click on the link "about" I want a div to show up, which is this one:
<div id="secondary-container">
<div id="about-wrapper">
<div id="header">
<h1 id="about-heading">about</h1>
</div>
<div id="information">
<h2 id="introduction">introduction:</h2>
<p id="paragraph">hello! welcome to my website!</p>
</div>
<div id="content">
<h2 id="my-information">my information:</h2>
<ul>
<li>name: <span>danny moon</span></li>
<li>age: <span>21</span></li>
<li>sex: <span>male</span></li>
<li>location: <span>new jersey</span></li>
</ul>
</div>
<div id="feature">
<h2 id="my-skills">my skills: </h2>
<ul>
<li>html: <span>50%</span></li>
<li>css: <span>50%</span></li>
<li>javascript: <span>30%</span></li>
<li>python: <span>60%</span></li>
</ul>
</div>
</div>
</div>
My jquery code right now is very simple
$(document).ready(function(){
$('#about').click(function(){
$('#secondary-container').show();
});
});
However, when i press the "about" link, nothing happens. Any suggestions? If you guys need my full html/css/jquery/js folders
Here is a link using dropbox:
https://www.dropbox.com/sh/c8abu7mptjz2dkk/AABZWS-dPY7csAxIRgewP6H2a?dl=0
Thank you.
Im not sure if you already found this, but in the files that you linked you have some minor syntax errors.
You are missing the closing brackets '>' at the end of the script tags. It should look like this:
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<script type="text/javascript" src="../js/showhide.js"></script>
Since you have the dummy href="#", when you click your link, it is probably still acting like a link - adding the "#" anchor to your URL. You should prevent the default action of a link using event.preventDefault():
$(document).ready(function(){
$('#about').click(function(event){
event.preventDefault();
$('#secondary-container').show();
});
});
Note the event param passed to your click event function.
Related
so i'm familiar with the insertAfter() & insertBefore() commands but as we know from the Javascript docs:
The elements must already be inserted into the document (you can't
insert an element after another if it's not in the page).
So I have some code that hides a div in desktop view but displays in mobile, but when it appears I need this div to appear above some other divs, the problem is that at the same time i'm using jquery to insert some other divs so the insertBefore() command isn't working for me, is there a way to do this with items not in the page yet?
<script type="text/javascript">
$("div.tools").addClass("hide-desktop");
$("div.tools").addClass("hide-tablet");
$("#header").addClass("hide-desktop");
$("#header").addClass("hide-tablet");
$("div.mobile-menu").insertBefore("#new-logos");
$("body").prepend($('<div id="new-logo" class="hide-mobile">'+
'<div class="header-inner">'+
'<div class="logo">'+
'<h1></h1>'+
' </div>'
));
</script>
<div class="main-content">
<div id="new-logos" class="hide-mobile">...</div>
<div class="tools hide-desktop hide-tablet"></div>
<div id="header" class="header hide-desktop hide-tablet"></div>
<div class="mobile-menu hide">
<ul class="links">
<li>
Log In
</li>
<li>
Help
</li>
</ul>
</div>
Thanks in advance
Seems to work fine from what you're implying, more details?
http://jsfiddle.net/Pa32R/
$('<div class="div4">4</div>').appendTo('body');
$('<div class="div5">5</div>').appendTo('body');
$('.div1').insertAfter('.div4');
I can't seem to get tabs to work. I copied and pasted the code from the Foundation docs, and the tabs show up properly, but the content does not change when I click on them. It just displays the content for the first tab.
This is the page I am working on.
If it helps to know, I am working on a child theme of Reverie.
EDIT: Here's the code from the Foundation Tabs page that I am using:
<dl class="tabs vertical" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
<dd>Tab 4</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
</div>
<div class="content" id="panel2a">
<p>Panel 2 content goes here.</p>
</div>
<div class="content" id="panel3a">
<p>Panel 3 content goes here.</p>
</div>
<div class="content" id="panel4a">
<p>Panel 4 content goes here.</p>
</div>
</div>
The foundation file you have is ©2013, and 200+ lines. The current Foundation 5 file is ©2014 and 163 lines. Perhaps there is a version issue? Try to update the file with the most current F5 js file and see if that helps.
In searching the source of your "example" there is no mention of the actual "tabs-vertical" lass and the tabs containers... has it been removed? It's hard to test a page without the code actually on it...
Your code shown here is syntactically correct so the error must be within the JS file somewhere/somehow.
Click this link (Line 312) in the source to see the ©2013 Zurb file.
In addition.. you are calling two files so this may be the problem too...
So I've been working on this, and got confronted with a serious issue. When I clean all the cache and session and cookies and when I just continue to work.
//to explain in plain text
<div id="player_information">...here goes content...</div>
<div id="contacts">....here goes content</div>
This is what I have written and it stands the first time I login without cache/coockies cleaned.
If I logout and I decide to loging with some other account, it happens this:
<div id="player_information">...here goes content...
<div id="contacts">....here goes content</div>
</div>
Any tip?
id="contacts" by default is set to display:none and id="player_information" is set display:block. I have a navigation bar with a jQuery code making the work. When I click on id="main", the id="contacts" goes to display:none" and id="player_information" fades in, when I click id="contact" the id="contacts" fades in and id="player_information" goes to display:none".
Hope I was clear. Thank you :)
PS: I see the same result on chrome and firefox.
Images:
EDIT: In response to #David Hoerster
$("#main").click(function(){
$("#player_information").fadeIn("slow");
$("#contacts").css({"display":"none"});
});
$("#contact").click(function(){
$("#contacts").fadeIn("slow");
$("#player_information").css({"display":"none"});
});
EDIT2: In response to #David Hoerster
<div id="nav_bar">
<ul>
<li><div style="display: inline" id="main">Main</div></li>
<li><div style="display: inline" id="contact">Contact</div></li>
<li><a href='general/logout.php'>Logout</a></li>
</ul>
</div>
I don't think this comes from CSS, your HTML may not be valid.
For example if you write this in HTML
<p>
Content goes here
<ul>
<li>Lorem</li>
</ul>
Content here too
</p>
You browser will render it this way
<p>
Content goes here
</p>
<ul>
<li>Lorem</li>
</ul>
Content here too
<p></p>
Try to take a look this way.
Bascally I have a fixed navbar with same page anchors and I'd like to keep the link active after the link has been clicked and taken to that section of the page. This is simple if the links to another page but I can't figure out how to here.
Here's what I've got. I'll just show you guys the first link and section since the solution will most likely be the same for the following links. I haven't written any CSS because I'm not sure how to go about this.
<nav id="navbar" class="navbar">
<div id="navContent" class="areaMargin navContent row">
Scheduling
</div>
</nav>
<section id="schedWrapper" class="bgWrapper ">
<img class="bgImg" src="images/bg/scheduling-bg.jpg">
<article id="schedContent" class="areaMargin fittext">
<header class="top">
<div class="col1"><h1>A New Way<br />To Schedule<br />Everything</h1></div>
<div class="col2"><img src="images/scheduling-client-group-event.png"></div>
</header>
<div class="clearfix"></div>
<div id="schedBottom">
<p>One calendar that lets you manage schedules for your team<br />
and your spots, all in one calendar, with options of sharing your<br />
own personal schedule, and you can accept and decline<br />
appointments with any device.</p>
</div>
</article>
Using jQuery you can simply toggle an active class on links:
$('#navContent a').click(function(){
/* remove class from prior active link*/
$('.activeLinkClass').removeClass('activeLinkClass');
/* "this" is current link clicked*/
$(this).addClass('activeLinkClass');
});
So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!