I have one page design with 3 sections.
<section>
<div class="page1">
content
</div>
</section>
<section>
<div class="page2">
content
</div>
</section>
<section>
<div class="page3">
content
</div>
</section>
I use scrollify.js to scroll to next section on mousewheel. In my first section I have fotorama loaded. When I reload the page, the page shows the second section for a second before it jumps to first section when fotorama is loaded.
I know that I can use Javascript delay function to delay the second and third section. But will this be the right thing to do? Or is there a way to use a function that can wait for the first section to load until the second and third section is loaded?
Ok. I managed to fix this problem by setting a min-height to page1.
min-height: 100vh;
Related
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.
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
I've been googling this for days and although there are many similar threads the answer still eludes me. I have pared the problem down to this:
<div data-role="header" data-id="myHeader" data-theme="none" data-position="fixed">
<img src="images/my1200x150logo.jpg"/>
</div><!-- /header -->
<div data-role="content">
<p>Content line 1</p>
<p>Content line 2</p>
<p>Content line 3</p>
<p>Content line 4</p>
<p>Content line 5</p>
</div><!-- /content -->
<div data-role="footer" data-id="myFooter" data-theme="c" data-position="fixed">
<h4>My footer</h4>
</div><!-- /footer -->
I am trying to achieve a RWD effect with the logo image resizing to fit the page. This all works perfectly except for the initial page load, which sets padding-top to zero in the jqm updatePagePadding routine causing the content to flow up under the image.
I understand that images load hours after the js is run and this is a common issue. Any event such as a page resize causes the padding to be updated correctly.
So my question is, how can I force JQM to call updatePagePadding after my image(s) have finished loading ?
Jquery pageshow event ? link to the API
Basically jquery will fire an event after the page is loaded, and the elements are ready you can wait for that event and then call you function, example:
$("#pageID").on("pageshow",function(){
updatePagePadding();
});
Also check this for complete reference on what events are binded to every jquery mobile page, page widget API
Using bootstrap's navbar, I am trying to figure out how to make it not to hide the top of the body section.
Actually, it is very well solved using what is recommended here:
Twitter Bootstrap - top nav bar blocking top content of the page
But there is still something that is not working: when you have a link like this:
<li>Go to Section 1</li>
<li>Go to Section 2</li>
<li>Go to Section 3</li>
<li>Go to Section 4</li>
And
<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p>Back to Top</p>
<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p>Back to Top</p>
<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p>Back to Top</p>
<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p>Back to Top</p>
In this case, when you click on, for example, Section 2 direct link (or shortcut), the page properly scrolls-down until the section 2, but it hides the beginning of it behind the bootstrap navbar.
Any clue about how can this be fixed?
By adding the :target psuedo-selector to a linked CSS you can apply a defined padding to your selected link (as long as it displays in your browser as: www.example.com#link1).
I spent the last 2 hours trying to search the web trying to find Jquery or JS to apply padding to the target div and after modifying my Google search terms found this
There might be a way to fool proof this with older browsers, but for the time being, this makes me a happy camper.
Put some top padding on your <h4>'s to account for your navbar's height. I.e. put this in your CSS:
h4 {
padding-top: 30px;
}
Of course, change 30px to you actual navbar height.
I've had the same problem and haven't found a real solution, but just more workarounds (like the "padding-top" work-around itself, that seems very hackish to me). It looks like the topbar issue is still unsolved, people just hack around it somehow.
One non-invasive work-around that works for me (as good as it can) is to add the following JavaScript to the page (apart from the "padding-top" hack):
var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
I found this in a comment to a bootstrap GitHub issue. However, the function isn't executed in all necessary occasions (e.g. when going to the same anchor again).
A more reliable work-around is moving the anchor positions using CSS relative positioning (found in this StackOverflow answer:
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
However, this is more invasive because you have to give your anchors a class (to distinguish it from links). So you have to update all your anchor HTML code (which might not always be possible, e.g. when you are dealing with a rigid CMS that generates your anchors):
<a class="anchor" id="top"></a>
What to do if i want to link two internal pages on the click of a button using jquery or javascript...
i can do it using <a href=#nextPage"> in HTML but i want a script to do it! what i am doing right now is:
<!-- first page-->
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>Test page</h1>
</div>
<div data-role="content">
<p>this page will link internal pages using # </p>
change to next page
</div>
</div>
<!-- second page-->
<div data-role="page" id="nextPage">
<div data-role="header">
<h1>Test page 2 </h1>
</div>
<div data-role="content">
<p>this page will appear after you click the button on first page. </p>
</div>
</div>
this is doing good, but what i need is a script to link them. as in my app i need to change the page on click of button only after certain conditions met. but i dont know how to do it...
-----------Edit------------
I found out a way
window.location.href="#nextPage"
this is how its done.
Thanks all for your effort..
You can add onclick handler to the a tag:
JS
function navigate() {
if (condition) {
$.mobile.changePage("#nextPage");
}
}
HTML
change to next page
OR you can do this:
JS
$(document).ready(function() {
$(".nav-nextPage").click(function() {
if (condition) {
$.mobile.changePage("#nextPage");
}
});
});
HTML
change to next page
jQuery Mobile, Anatomy of a Page
Scroll down to Local, internal linked "pages"