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.
Related
I've got a page with three tabs on it, each with different content. I also have a div with a select and a button. I would like this div to display on the first two tabs but not the third. I know one option would be to just duplicate the content on both tabs, but then I would have to keep their data in sync with javascript and I feel like there has to be a better solution than that.
So I tried putting the div between where the tabs are defined and where the tab content starts, which works fine, but it makes it show in all three tabs. In the javascript, I tried binding click events to the tab buttons
$("#pushingInfoTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingInspTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingGridTabButton").click(function () {
$("#addInspection").hide();
});
and showing the div in two tabs and hiding with the third, but after putting debugger inside of the click events, they never fire. Is there an easier way to do this that I'm just unaware of?
Here's the corresponding HTML. Sorry for not having it at first.
<div data-role="tabs" class="ui-content insetContent infoContent" >
<div data-role="navbar">
<ul>
<li><a id="pushingInfoTabButton" href="#pushingInfoTab" data-theme="a">Info</a></li>
<li><a id="pushingInspTabButton" href="#pushingInspTab" data-theme="a">Insp</a></li>
<li><a id="pushingGridTabButton" href="#pushingGridTab" data-theme="a">Grid</a></li>
</ul>
</div>
<div id="addInspection">
<div class="ui-block-a" style="width:30%;margin-right:0px;">
<a data-role="button" data-inline="false" data-theme="b" style="padding-left:0px; padding-right:0px;" id="A1">Add</a>
</div>
<div class="ui-block-b" text-align:right" style="width:70%; margin-left:0px;">
<select data-inline="true" data-native-menu="true">
<option value="" id="Option1">Select</option>
</select>
<a data-role="button" data-inline="true" data-theme="g" style="margin-left:-7px;" id="A2">Clr</a>
</div>
</div>
<div id="pushingInfoTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingInspTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingGridTab" class="ui-content insetContent infoContent">
</div>
Notice: Didn't put any of the content that's actually in the tabs, because it's hundreds of lines of unnecessary markup, and I don't think it's the issue.
There is a typo error here:
text-align:right" style="wi
Then, put the JS at the bottom of the body, or at jQuery Document Ready.
Here is the working demo.
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 a site that uses a JavaScript animation for the background of some of the sections. Right now, the section in question is broken down like this:
<section id="intro">
<div class="info">
<div class="container">
<div class="row">
<div class="col-full"><h1>My Name</h1></div>
</div>
<div class="row"><div class="col-1-4 centered line"></div></div>
<div class="row">
<div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
</div>
</div>
</div>
<nav id="nav">
<!-- The content between <span> </span> tags will be hidden on mobile version -->
<ul class="clearfix">
<li>Pro<span>file</span></li>
<li>Ski<span>lls</span></li>
<li>Exp<span>erience</span></li>
<li>Edu<span>cation</span></li>
<li>Por<span>tfolio</span></li>
<li>Con<span>tact</span></li>
</ul>
</nav>
</section>
Originally, I wanted to set the background of the entire section using
dataUrl = canvas.toDataURL();
document.getElementById("intro")[0].style.background='url('+dataUrl+')'
but that didn't work, so I ended up going with
dataUrl = canvas.toDataURL();
document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'
which did. However, the Nav bar scrolls with the page as you move down, and as soon as the script for scrolling it down kicks in, the background reverts to its default blue color.
My first thought was to simply add
document.getElementById("nav")[0].style.background='url('+dataUrl+')'
but that didn't work. I had some success with
document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'
but only the area immediately surrounding the text used the animated background; the rest was still blue.
So I'm not sure if it's some issue with getElementById, or if you can't use style.background with <section> and <nav>.
Anyone have any thoughts?
I dont think you need the array selector with getElementById so try it on the whole section again and see if that will fix it for you.
So do document.getElementById("intro").style.background='url('+dataUrl+')'
kindly take a look at my HTML code below:
<div class="accordion">
<ul>
<li class="box1">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box2">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box3">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
</ul>
</div>
Basically it's an accordion powered by a jQuery plugin. It has 3 boxes and depending on which box the user is hovering on, I wish to have the inner divs (normal, expanded, hidden) shown or hidden. Here are the scenarios:
On default, all div.normal will be shown by default, div.expanded and div.hidden will be hidden.
When user hovers on li.box1 for example, its div.expanded will be shown and div.normal and div.hidden will be hidden. For li.box2 and li.box3 then however, only div.hidden will be shown respectively, the rest of the divs will be hidden.
I have begun with the code but I don't think it's going anywhere. (I am a designer, you see.)
It sounds complicated but I know it can be easily done via jQuery, to anyone who can help, I'd really appreciate it.
UPDATE:
Here's what I've done so far.
$(document).ready(function () {
$(".accordion li").hover(function () {
$(this).siblings().children(".normal").hide();
$(this).siblings()..children(".hidden").delay(700).show();
$(this).children(".expanded").delay(700).show();
}, function () {
$(this).siblings().children(".normal").delay(700).fadeIn("fast");
$(this).siblings().children(".hidden").fadeOut("fast");
$(this).children(".expanded").fadeOut("fast");
});
});
You can initially hide divs by using style='display:none'
for hover event;
$("li.box1").hover(function(){
$(this).find('.expanded').show();
$(this).find('.hidden').show();
$(this).find('.normal').hide();
});
$(document).ready(function(){
$('.expanded').hide();
$('.box1').hover(function(){
$('.expanded').show();
});
});
This is how you can hide and show DOM elements in jQuery. Please get that set according to the way you want it to be.
I have one main page and other sources on other pages. Since I can't use ajax loading because of the server limitation, I have to use target="_webapp" attribute to load on new page
<div id="home">
Link to external page
... content ...
</div>
Since normal back button ( a href="#") doesn't work with external page, I'm using javascript:history.go(-1)
<div id="the-external-page">
<div class="toolbar">
<h1>The External Page</h1>
<a class="back" href="javascript:history.go(-1)">Back</a>
</div>
<ul>
<li>Internal page</li>
<li>Internal page</li>
</ul>
... content ...
</div>
<div id="page1">
<div class="toolbar">
<h1>Page 1</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
<div id="page2">
<div class="toolbar">
<h1>Page 2</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
It works if user navigate #home -> #the-external-page -> #home
but since the other pages have multiple link within it when user visit #page1, #page2 all the history stack and the back button doesn't work until pressed multiple time.
I can't put absolute link in the back button either because the list of original pages are dynamically generated.
Is there way to go back to resolve this ?
Did not test with your code, but I suspect .goBack() in the jQtouch object may be what you're looking for: https://code.google.com/p/jqtouch/wiki/PublicObject
Relevant section:
goBack( to:object )
Forces jQTouch to go back to a certain page in the history. You can pass a specific page ID, a number of pages to go back, or nothing to go back one page. If the specified page can not be found, jQTouch will go back one page by default.