Develop Reference

complex scrolling - how to implement it correctly

I faced such a scrolling problem: At the bottom of the page there is a news block with pagination and page reload. Above is the standard menu. How to correctly implement: if a user in ons pagination clicks on another page, he remains in the same scrolling (i.e. at the bottom of the page). I did it like this:
<script>
$(window).scroll(function () {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function () {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
</script>
But if the user who is at the bottom of the page clicks on any menu item at the top, he should, after loading, be on a new page at the top of the page, but of course he rolls down with this script. I put the event onclick Top, but how to do it only after reloading on a new page? Maybe my decision is wrong and there are other options. Thanks for any help !!

How to make Sidebar Hidden when page loads up in bootstrap?

This is my website .
It has a top menu and a sidebar menu. When the page loads up, the side bar is by default visible. There is no problem in Desktop, but when this is viewed on Mobile device, the side bar comes above the content of the website and it is not possible to remove it, since the toggle button to show/hide it is in the top menu.
Is it possible to make it hidden by default when the page loads up ? (Problem 1)
Also, if it works, then the show/hide sidebar works fine in desktop, but if we minimize the brower window, it becomes opposite, like, when it is hidden, HIDE SIDEBAR is displayed, when it is shown, SHOW SIDEBAR is displayed.
The jquery code I used to Hide/Show side bar is:
var f=1; // to displayd HIDE, since by default its shown.
$(document).ready(function(){
$("#menu-toggle").click(function(){
if (f==0)
{
$("#menu-toggle").html("<b>Show Categories</b>");
f=1;
}
else
{
$("#menu-toggle").html("<b>Hide Categories</b>");
f=0;
}
});
});
Is it possible to know if I am on mobile or desktop, so that I can initialise the value of f accordingly? (Problem 2)

Add one more line in $(document).ready to trigger click event on page load as below:
$(document).ready(function(){
//Event code start here
....
//Event code end here
$("#menu-toggle").trigger('click') //trigger its click
});
For your 2nd problem you will get lot of javascript solutions if you
search, like one here and another here

using toggle will be more convenient than click,if u want to make it hidden when the page loads up ,set display none first in html(simple way)
$(document).ready(function(){
$("#menu-toggle").toggle(function(){
if($(this).css('display') === 'none')
{
$("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
}
else
{
$("#menu-toggle").html("<b>Show Categories</b>"); //this is show
}
});
});

Using JavaScript to hide a div placed in front of an iframe after clicking any link

I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?

You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});

You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.

javascript is affecting every anchor, I want to make some exempt

so I have one script that scrolls the whole page smoothly. Nice script. It uses anchors to do this. So the NAvigation Menu basically says "ABOUT ME" or whatever, and when clicked the whole page scrolls to the ABOUT ME section. But what its programmed to do is when I click on an internal anchor link, it bring the browser view to the TOP, LEFT. which works fine, since I want to scroll the entire page.
BUT.
I am using another script that allows me to click an option on a menu, and a little window should pop up and give me the info. BUT instead, the whole page moves, thanks to the previous scrolling script, and puts the new pop TOP, LEFT.
Soooo? any ideas?
init: function () {
var lnks = document.getElementsByTagName('a');
for (var i = 0, lnk; lnk = lnks[i]; i++) {
if ((lnk.href && lnk.href.indexOf('#') != -1) && ((lnk.pathname == location.pathname) || ('/' + lnk.pathname == location.pathname)) && (lnk.search == location.search)) {
addEvent(lnk, 'click', HtinyScrolling.initScroll, false);
lnk.onclick = function () {
return false;
} // Safari
}
}

Rewrite the scrolling script so it does not affect the anchors in the menu. Without seeing any code it is difficult for me to say exactly what to change.
The best way to solve this would be to either make the scrolling script only affect anchors of a specific css class such as .scrollable, or alternatively make it not affect anchors with a specific class for example if the option menu has every option with class .option then disable your script for anchors with class .option. If I could see the relevant parts of your code I could help further

Detecting when inside an iframe and then hiding elements

I hope some of you better than me at coding can help.
I have a simple webpage (www.mypage.com). It has 5 links
Link 1 (www.mypage.com/link1.html)
Link 2 (www.mypage.com/link2.html)
Link 3 (www.mypage.com/link3.html)
Link 4 (www.mypage.com/link4.html)
Link 5 (www.mypage.com/link5.html)
Now from the main homepage, clicking on the link opens up a popup window using an iframe to display the page they clicked.
Now what I want to do is that when people click the link via the mainpage and hence get a popup/iframe, that on that page eg (www.mypage.com/link1.html) I want to hide some elements. The elements are things link Menu and Banner.
Now if a person enters one of the links manually eg typing www.mypage.com/link1.html directly into their browser, then I want the Banner and Banner to show.
Is there anyway I can do this?
Is there some javascript that can run that if it detects it's an iframe that it can do a display:none on the elements I want to hide?
Many thanks in advance.

This is how i would do it :
in the link pages (www.mypage.com/link1.html) i would have a script to verify if the hash of the url has a certain value.If it does, then hide the banners;else show the banners normally.
So when you open the page in an iframe, be sure to set the src to "www.mypage.com/link1.html#banner_off" and not to the simple "www.mypage.com/link1.html".
This way, when a user types in the browser the link address (without the hash value), your ads will be shown.
here is an example of how the script in the link pages should look like:
function manageBanners(){
if(document.location.hash == "banner_off")//hide banners
{
//code to hide banners here
var banners = document.getElementsByClassName('banner');
for(var i in banners)
banners[i].style.display = 'none';
}
//else do not alter the banners visibility
}
window.onload = manageBanners;
Of course you can use in the same way the php-query like sintax : url?banner=false and check for the parameters in the url.
Hope this helps!

The best way I can think of to detect that a page is in an iFrame is to compare the URL of the page with the URL in the browser window. If they're different, it must be in a frame.
if (top.location != location) {
// hide menu and banner
}