Here goes a really simple question!
I want to make a navigation menu and content with jQuery.
Here is my navigation links :
<div id="menu" class="menuBg">
<ul>
<li><a class="btn1" href="#">How To?</a></li>
<li><a class="btn2" href="#">Prizes?</a></li>
<li><a class="btn3" href="#">Rules</a></li>
<li><a class="btn4" href="#">Score</a></li>
</ul>
</div>
Content :
<div id="content">
<div id="MainPage"><!-- content goes here --></div>
<div id="HowTo"><!-- content goes here --></div>
<div id="Prizes"><!-- content goes here --></div>
<div id="Rules"><!-- content goes here --></div>
<div id="Score"><!-- content goes here --></div>
</div>
Sample Navigation Code (includes first links code) :
$(document).ready(function() {
$('#baslaBtn').on('click', function(){
$('#HowTo').hide();
$('#Prizes').hide();
$('#Rules').hide();
$('#Score').hide();
$("#MainPage").fadeOut(500,"linear", function() {
$("#soru1").slideToggle(function() {
$("#soru1").effect("fadeIn",2000);
}).show(2000);
});
$('#MainPage').hide(1000);
});
});
...and i have 5 more on('click') function to navigate my menu to my contents. The problem is every time all of these contents loading without any effect. I want to load my content when load process is finished. The other problem is i'm putting hide() in every function to hide other objects.
Is there any way to make a function without a repeated code like :
$('#HowTo').hide();
$('#Prizes').hide();
$('#Rules').hide();
$('#Score').hide();
And i want to show my contents opening with simple fadeIn effect. If i click the other links all objects will hide them self or fadeOut, new content object's goes load and will open with fadeIn effect.
P.S : When i load my content to i can't use the content features like jquery.scroll plug in..All of them are disabling themself.
Really confused. Any suggestions?
Thanks.
Assuming you're going to fade all divs inside #content and #soru1 is the div you want to show, you could simply use this:
$('#content div').fadeOut(function() {
$("#soru1").fadeIn(2000);
});
This will fade every div inside #content.
To fade only specific divs and not every div element inside #content, you can change your code into this, as example:
<div id="content">
<div id="MainPage" class='toFade'><!-- content goes here --></div>
<div id="HowTo"><!-- content goes here --></div>
<div id="Prizes class='toFade'"><!-- content goes here --></div>
<div id="Rules"><!-- content goes here --></div>
<div id="Score" class='toFade'><!-- content goes here --></div>
</div>
And do the following:
$('#content .toFade').fadeOut( function() {
/* ... */
});
Then, only the selected divs would fade.
Related
I'm having difficulty applying a class to a different page. Here is the scenario: I have a single page that I'm designing that loads external pages onto that page based off a link click in the menu. With this, I would like to incorporate a 'theme' button that when selected, changes from light to dark theme. The issue I'm running into, is even calling the class in the script, will change the background of that class, but won't change any of the font in the external page being displayed and there is also a white border on the object tag.
Question is, how do I remove the white border in the object tag and affect the font tags (h1, h2, p, li, a, etc) on the page being loaded in the object tag?
Here is the code for the script below. The external page is identified by the "ex_object" class:
<script>
$('#darkend').click(function(){
$('html').toggleClass("dark");
$('.ex_object').toggleClass("dark");
$('#darkend').hide("slow");
$('#lightend').show("slow");
$('#nav-toggle-header').css('color','#fff');
$('.wrapper').css('background','rgb(32,32,32)');
$('.sidemenu-info').css('background','rgb(32,32,32)');
});
$('#lightend').click(function(){
$('html').toggleClass("dark");
$('.ex_object').toggleClass("dark");
$('#darkend').show("slow");
$('#lightend').hide("slow");
$('#nav-toggle-header').css('color','#000000');
});
$('#nav-toggle-header').click(function(){
$('.wrapper').show('slow');
$('#sidebar').show('slow');
});
$('#nav-toggle-menu').click(function(){
$('.wrapper').hide('slow');
});
</script>
<div class="wrapper">
<nav id="sidebar">
<section data-accordion>
<section id="menu_accordion" data-control>DROP MENU</section>
<div data-content>
<li id="menu_accordion_sub"><span>TEST</span></li>
</section>
</nav>
</div>
<div class="main">
<div id="content">
<div id="tab-1" class="tab-content">
<object data="Pages/TEST.html" class="ex_object"></object>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.tab-link').click(function(){
var tab_id = $(this).attr('data-tab');
$('.tab-link').removeClass('current');
$('.tab-content').removeClass('current');
$(".wrapper").hide("slow");
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
});
</script>
I have a div which is set to refresh every 5s via a javascript reload. WHen the main page loads it is fine, it fits in it's box and everything is in line (picture 1). After 5s when the javascript reloads it, it stretches the div (picture 2) and after another 5s it stretches again (image 3) it then remains at this level of stretch. I've tried putting the div with id=messages as class=col_1_2 one but it make no difference.
index.php - where the div is:
<div class="container">
<div class="clear padding20"></div>
<div class="col_1_2"><?php include('companynews.php'); ?></div>
<div class="col_1_2 last" id="messagesouter" name="messagesouter"><div id="messages" class="messages"><?php include('messages.php'); ?></div></div>
<div class="clear padding20"></div>
<div class="container">
<ul>
<li>Employee Details</li>
<li>Abscence Records</li>
<li>Fleet Records</li>
<li>Time Sheets</li>
<li>Abscence Request</li>
</ul>
<div class="clear"></div>
<div class="bordered_box"></div>
more of the page
Javascript to reload the messages div:
<script type="text/javascript">
function loadlink(){
$('#messages').load('messages.php',function () {
$(this).unwrap();
});
}
loadlink();
setInterval(function(){
loadlink()
}, 5000);
</script>
CSS for the class:
.col_1_2 {
width:460px;
float:left;
margin:0 20px 0 0;
example output of messages.php:
<div class="toogle_box">
<div class="toggle opened_toggle">
<div class="icon"></div>
Messages </div>
<div class="toggle_container">
<!--LINE MANAGER ONLY ITEMS-->
<!--PENDING ABSCENCE REQUESTS-->
You have 1 pending abscence request<br>
<!--TIMESHEETS TO BE COMPLETED-->
Please complete the timesheet for 01/12/2015<br>Please complete the timesheet for 02/12/2015<br>
</div>
</div>
It looks like you are using some CSS framework (Bootstrap?) in your layout, namely .col_1_2.
When you use the jQuery .load() method, you are getting your content from message.php, which is okay.
However, after the load is finished, you issue $(this).unwrap() which removes the parent element that is enclosing #messages, first the block with classes col_1_2 last and then upon the another load, the block with class container.
The code is systematically undoing the layout parent block by parent block.
I don't think you need the .unwrap() method, so try removing it.
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.
I'm trying to fix the top menu on page change.
Example:
<div data-role="page" id="page1">
//page 1 contents
</div>
<div data-role="page" id="page2">
//page 2 contents
</div>
and my top menu
<div id="top-menu">
</div>
Is there any way to not make the menù code reappear on each page?
I want my menu div to be collective for all pages.
Any ideas?
Thanks,
Andrea
No, the concept of "pages" does not allow for static content to be shared among them.
But I see at least two solutions:
use only one page containing your menu, and many hidden div to encapsulate your content (like <div data-role="content" id="page1" class="hidden">). Using your menu navigation, you just have to show/hide the content you need
use some JavaScript trickery:
$(document).on("pagebeforeshow", "[id^=page]", function(event)
{
// "move" the menu to the content of the current page
// (you have to add IDs to each page like 'page1content')
$("#top-menu").prependTo("#" + this.id + "content");
});
I have the following
<body>
<div class="sidebar"></div>
<div class="main">
<div class="page-1">
<p>Page 1</p>
<button id="btn-page2">Go to Page 2</button>
</div>
<!-- Other Pages -->
<div class="page-2">
<p>Page 2</p>
</div>
</div>
</body>
I am trying to follow the same principle of JQuery mobile by having all the pages in a single HTML document.
On page load, only the div with class page-1 should be displayed. However on clicking the button with id btn-page2, the second page should be displayed instead of the first one.
I figured I could add an .active-page class on the visible page with a display:block as attribute.
However, I also want to slide the second page from the bottom smoothly.
Any suggestions?
You can have a look at this blog.
http://mindfiremobile.wordpress.com/2013/07/16/smooth-page-transition-on-mobile-devices-within-single-html-page/
This demonstrates the way to add slide page effect using css3.
You can use the same concept to have the page slide form bottom to top.
you can create a css3 class which will slide any page from bottom and add it to the page div based on the button clicked