We Keep Coding

How to move to another page and then to a certain section of the page using a Javascript method

I have 3 files:
mainPage.html
starter.html
Landing.js
When I click on the div in starter.html I want to move to mainPage.html and then to the Menu section of this page
starter.html code:
<li> <div onclick="onBackToMenu()">Back to menu</div></li>
landing.js code:
function onBackToMenu() {
window.location.href = "../mainPage.html";
document.getElementById("Menu").scrollIntoView();
}
mainPage.html: (partial code)
<!-- Menu section -->
<span class="anchor-offset" id="Menu"></span>
<div class ="section" >
<div class ="sectionHeadings">
<h1>Menu/Products</h1>
<div class="menu">
<div class="starter" onclick="location.href='pages/starter.html';">
<h3 class="menu-heading starter-heading">Starters</h3>
</div>
When I click on the div then it does take me to mainPage.html, but it doesnt want to take me to the Menu section with id of Menu.
Please help

Since you have an id on that section already ==> <span class="anchor-offset" id="Menu"></span> pass the id at the end of your href like this: window.location.href = "../mainPage.html#Menu"; this will a direct you to that section when the new page loads.
function onBackToMenu() {
window.location.href = "../mainPage.html#Menu";
document.getElementById("Menu").scrollIntoView();
}

No javascript is necessary. It's better practice and better for accessibility to use an anchor element (<a>) with an href element to create a hyperlink to the new page with a fragment identifier for the section you want to scroll to.
In your case, just change the list item in starter.html to:
<li>Back to menu</li>
This will navigate a user to the menu section of the new page.

Link is not getting clicked if parent div has click event

I have a div which has a trigger click associated with it. Inside that div there is another div in which I have binded html using innerhtml.bind(Aurelia). That HTML part contains anchor tag. Now when I am clicking on the link nothing is happening. It is not opening the link.
My HTML structure looks somewhat like this:
<div click.trigger="someMethod()">
<div>
<div innerhtml.bind="">
</div>
</div>
</div>
Please help in what I am doing wrong?

want to redirect to another page from colorbox iframe after closing it

Does anyone know how to implement the following JavaScript process?
I`m using colorbox to display iframe.
I setted the banner link on colorbox iframe.
I want this iframe to close when the banner is clicked, after that I want the parent window to redirect to another page.
following 2 codes are what I`ve tried:　　　
1
<div>
<a href='#' onclick='parent.$.colorbox.close();linkto();'>
<img src="../images/test.png" alt=“#” >
</a>
<script>
function linkto() {
location.href = "https://www.test.com";
}
</script>
</div>
2
<div>
<a href='#' onclick='parent.$.colorbox.close(); window.location.href ='https://www.test.com;'>
<img src="../images/test.png" alt=“#” >
</a>
</div>

You can use window.top.location.href to target the top most window element and redirect to the specified page. This can be done from within aniframe`.
HTML:
<a href='#' onclick='parent.$.colorbox.close(); linkTo();">
JS:
function linkTo() {
window.top.location.href = "https://www.test.com";
}

JS menu stops working when navigating to a different page

I'm having some issues with my JS menu. When the page loads the menu work great, and as expected. You click the option, then it displays the menu items.
However, once I click one of the menu items and navigate to a different page the menu stops working! When you click on the icon, the menu no longer appears. The page just sits there. When i look try debug in chrome it no longer "hits" the code.
I have noticed that if i refresh that page, the menu works again as expected :/
My JS code is below, what am I missing for this kind of issue to arise?
I have created a pen for this - http://codepen.io/alr3id/pen/bwdKxL
function MyMenus(jQuery) {
$(".p-menu-icon").on("click", function(event) {
var e = $(this).next(".p-menu");
e.hasClass("p-menu_open") || $(document).trigger("click"),
$(".p-modal-bg").toggleClass("p-modal-bg_active"),
e.toggleClass("p-menu_open"),
event.stopPropagation()
});
// Removes the menu open class.
$(document).on("click", function(t) {
var e = $(t.target)
, i = 1 === e.closest("p-menu").length;
i || ($(".p-menu.p-menu_open").removeClass("p-menu_open"),
$(".p-modal-bg").removeClass("p-modal-bg_active"))
});
}
// Load
$(document).ready(MyMenus);
Below is the HTML for the Menu
<nav class="p">
<div class="p-modal-bg"></div>
<div class="p-property">
<a class="p-property-name" href="/">
Logo Here
</a>
</div>
<div class="p-user">
<a class="p-menu-icon">
<div class="icon icon-navigator-toggle"></div>
</a>
<div class="p-menu p-menu_navigator">
<a class="p-menu-item p-menu-item_dashboard" href="/">Dashboard</a>
<a class="p-menu-item p-menu-item_orders" href="/orders">My orders</a>
<a class="p-menu-item p-menu-item_back-bar" href="/products">Products</a>
</div>
<a class="p-menu-icon p-menu-icon_account">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="{image here}">
</div>
</a>
<div class="p-menu p-menu_account">
<div class="p-menu-item_account-details">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="https://secure.gravatar.com/avatar/{image here}">
</div>
<div class="p-account-details-name">
Example User
</div>
<div class="p-account-details-email">example#example.com</div>
</div>
<a class="p-menu-item p-menu-item_settings" href="account">Account settings</a>
<a class="p-menu-item p-menu-item_messages" href="#">Messages</a>
<a class="p-menu-item p-menu-item_logout" href="#">Sign out</a>
</div>
</div>
</nav>

Well, this is something I didn't even consider, it turns out this issue is down to Rails and Turbolinks!
Due to the way Turbolinks loads pages it screws up
$(document).ready
to fix this you need to use...
$(document).on "turbolinks:load"
http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

Have you imported the JS file you are using in this page (new page where it stuck) too ? Try adding the code on another file also or move your js code to another js file and import it on that page.

Since it works at freshly loaded page the code itself shouldn't be a problem.
What comes to mind are class changes. Open up your browser's inspector and check if there are any class name changes that would resolve in loosing a listener.
Also try putting some console.log() inside each function so you are sure that both events aren't getting fired one after another.

Following anchor on another page and triggering href

So I want to click on a link of a page which redirects to another one that has 3 different div's which trigger scripts on their href. I am not being able to do this. I tried using anchors but it does not trigger the href...
1st page
<a href="second_page.html#anchor">
2nd page
<div>
<a id="header" href="javascript:showonly('header');" name="anchor">
</div>

You need an onload handler in the head section of your second page which catches the hash and runs your action(s). Something like this should work:
<script type="text/javascript">
window.onload = function(){
if( window.location.hash == '#anchor' ) showonly('header');
}
</script>
You dont need the <a id="header" href="javascript:showonly('header');" name="anchor"> in your markup for this to work