I am currently building a website containing lots of links to different sections of my website (also known as navigation). Lets call those links and their corresponding pages link1, page1 , link2, page2, link3, page3 etc.
The general code for them is this:
Link1
Link2
Link3
I want the user to click each link to move to the corresponding webpage and it works as supposed to. The problem is that I want the links to do nothing when the user is on the same page as the link they clicked (meaning it will only reload the page). Let me make this clear by using an example:
Current use: User is on page1. User clicks on link1. The browser will reload page1.
Desired use: User is on page1. User clicks on link1. The browser will do nothing.
TL;DR Essentially I am searching for an if clause. I have read there is no if clause in HTML simply because it's a markup language but what is another way to implement this? Thanks for your help.
The best answer I have found without the need to use JQuery or JS after munching through SO is this, answer made by Matt Crinklaw-Vogt:
Add a /#!. This will prevent the scrolling to the top and will also prevent the page reloading.
Code:
Link1
Original answer:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
I'm not sure I like it, but you could use an empty bookmark to do this...
Link1
If you aren't on page1, it will load page1, but once you are there, it won't do anything.
Link2
OR
<a onclick = "return false;">Link2</a>
That cancels out the load.
On page load, you could use JS as follows
Link1
JS:
document.getElementById("link1").setAttribute("href", "#");
You can use javascript to compare the current url to the anchor link, and if they're the same, prevent the default click event. Using jquery:
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
if(urlRegExp.test(this.href.replace(/\/$/,''))) {
$(this).click(function(event) {
event.preventDefault();
});
}
});
Related
Consider the following link:
https://bittrex.com/Market/Index?MarketName=USDT-neo
I need to somehow manipulate the URL so that when it's clicked, it jumps straight to the Order Book section of the webpage.
I've tried finding the ID for that part and appending it the URL, but that wouldn't work because the ID isn't generated when you enter the page through the normal URL.
Does anyone know how to manipulate the link so it jumps straight to the Order Book part?
To be clear, I do not want to use JS. I want to have a pure link which I can click and will take me to the Order Book.
I need this so I could take a screenshot of the chart using a node module called Pageres.
If anyone has any different idea as of how to download the chart of the Order Book to a png, it'd be awesome (Or even more generally, download a chart of any cryptocurrency's Order Book to a png, using any website).
Many thanks,
~Yuval
Using javascript, you can handle the click in the following way:
<a id="fake_link" class="fake-link" href="https://bittrex.com/Market/Index?MarketName=USDT-neo">Click me</a>
<script>
var elem = document.getElamentById("fake_link");
elem.addEventListener("click",function(e){
e.stopPropagation();
e.preventDefault();
window.location = "YOUR NEW LOCATION";
},false);
</script>
In the general case, all you need is add the id of the part of the page that you want to go to. The section you mention starts with:
<div class="row" id="rowTable">
So all you have to do is add #rowTable to your URL:
https://bittrex.com/Market/Index?MarketName=USDT-neo#rowTable
That will instruct the browser to look for the part of the page with the id that you mention.
But you are right, the id part of the page is generated after it is loaded. In your case it only works if you change the URL with the page already loaded.
You could try using an intermediate page with a bit of javascript that will first load the page, then jump to the part you want.
You can use the location.hash property in java script to grab the hash of the current page
use is like this:
var hash = window.location.hash;
if(hash == "#tabChartOrderBook"){
//function to switch tab
}
I wrote this for your url
https://bittrex.com/Market/Index?MarketName=USDT-neo#tabChartOrderBook
and as I said in code your url hash is #tabChartOrderBook
I have an application which includes a series of forms, each on their own page.
I do not want some of these pages to be added to the history stack. So that when the user presses back, it skips them.
Jquery-mobile does this with dialogs. You can configure this to happen with ALL pages (or any other data-role) but not with just some pages.
Does anyone know how to do this? Alternatively, would it be possible to create a new data-role that extends "page". If that was possible, then I could disable history for all of those pages.
in this case, you can call $.mobile.changePage() by yourself:
$.mobile.changePage( "url", {
changeHash: false //do not track it in history
});
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
http://jquerymobile.com/demos/1.2.0/docs/api/methods.html
I was facing the same issue and I was going berserk!!! Finally, I was able to do it with the following code that does just that!
The code below automatically prevents storing the changed locations for all pages in the current document.
Please note that it has been tested with jqm 1.4.2
<script>
$(document).on("pagebeforetransition",function(event, ui){
ui.options.changeHash = false;
}) ;
</script>
Hope it helps
Checkout this question, pretty much the same as what you are trying to do.
How to modify jQuery mobile history Back Button behavior
Thanks,
Alex.
Please let me know how to load all the "pages" in a html document into the current page dom.
I tried using $.mobile.loadPage, but only the first "page" of the document is loaded.
I want to load all the "pages" in that html document.
While googling for this i found two plugins ToddThomson/jQuery-Mobile-Subpage-Widget and a multiview plugin. But i could not find the basic "how to use" section for these two plugins.
Is there any links which shows how to use these plugins.
It can be done easily.
Lets say you have 2 html files. First one has a one jQM page and second html has two pages. Also lets say first html page is called test1.html and second one is called test2.html, test1.html is first page to open.
Only thing you need to do (to load every page from test2.html) is to add an attribute data-prefetch to a a tag link leading to the second page.
Here's an example:
<a href="test2.html" class="ui-btn-right" data-prefetch>Next</a>
If you wish, go to my profile and send me an email, and I will send you a working example.
Here you can find more about data prefetch in jQM: http://jquerymobile.com/test/docs/pages/page-cache.html
If you are changing your page with a changePage function you can still prefetch it with a :
pageContainerElement.page({ domCache: true });
I've a little problem with a jQuery Mobile app I'm building. I have page where a back button using data-rel="back. It works well except in one case :
These page can be access by a link from an e-mail. So, when you come from the e-mail, the back button will not work.
So, is there a way to test if there is a previous URL or if the user comes from an e-mail ?
Could you check for the data-rel='back' attribute?
$("a:jqmData(rel='back')").length
Example:
http://jsfiddle.net/KHhv4/4/ (loading normally)
http://jsfiddle.net/KHhv4/5/ (Loading page2 first to mimic email)
OK maybe this is a better option.
$(document).ready(function(){
$('a[data-rel="back"]').hide();
})
$('a').on('click', function(){
$('a[data-rel="back"]').show();
});
I'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.