I don't know if it's possible but I'm trying to open a page by clicking on an HTML element. I detail below.
I have a web page in HTML with a source code from a third party tool (a code with products for affiliate purchases). So when the user clicks on one of the products in this code he is redirected to the third party merchant. Let's imagine the code as follows:
<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div>
<!-- my page content -->
</body>
What I would like is that if the user clicks on a product, my site opens a page too, with a text like "Were you able to find your products? We would be interested in your feedback".
That's how I tried it but without success :
<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<a href ="comments.html" target="_blank">
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div></a>
<!-- my page content -->
</body>
If it's what im thinking the easiest way to do that is just by using javascript, example below.
// If you want to redirect user without opening a new tab, use this
// window.location.href="https://example.com";
// But if you want to open a new tab, use this
// window.open("https://www.example.com", "_blank");
function noNewTab() {
window.location.href="https://example.com";
}
function newTab() {
window.open("https://www.example.com", "_blank");
}
function localFile() {
// First we will need to get the url of your webpage
let currentUrl = window.location.origin;
// To what file redirect?
let redirectFile = "test.html";
// And redirect. We will need to add / before the file path
window.location.href = currentUrl + "/" + redirectFile;
}
<div onclick="noNewTab()">
<p> Example product. Click on me! (No new tab) </p>
</div>
<div onclick="newTab()">
<p> Example product. Click on me! (New tab) </p>
</div>
<div onclick="localFile()">
<p> Example product. Click on me! (Change file, not url) </p>
</div>
With new tab it depends on browser if it allows to show it. On the modern browsers there is popout asking for access
A possible approach is to use target="_blank" along with a click handler, like
Visit W3Schools
If you need to trigger this programmatically, then you can:
window.open(yoururl);
//Your further code...
I think that you should try to use span instead of div tag or maybe a p tag
<a href ="comments.html" target="_blank">
<span>
< HERE IS THE PARTNER CODE >
</span>
</a>
Related
I'm in the process of updating my website and I am trying to optimise the website as much as possible. One of the things I'm trying to do is remove excess text and duplicate text/code.
I have around 20 pages and each page includes a button that pops up my privacy policy using the function below.
The page also imports .css for the pop up which includes mark up and script.
<!-- Begin Footer -->
<div class="mainText">
//site name etc
</div>
<div class="popup" onclick="myFunction()">
<div class="privacyButton">
Privacy Policy
</div>
<span class="popuptext" id="myPopup">
<!-- Policy Content -->
//html content like <p></p> and <strong> etc</strong>.
<!-- End of Policy Content -->
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<!-- End of Footer -->
How can I place this in a separate file and load it from the external file to save me having so much text on every page?
I've tried THIS to use a jQuery, but it doesn't work because of the nature of the pop up.
I've also tried placing only the content (which would still be better than nothing)
<!-- Policy Content -->
//html content like <p></p> and <strong> etc.
<!-- End of Policy Content -->
...in a separate .html file using
<link rel="import" href="/movedContent.html">
...but upon loading, it doesn't adopt the css from the popuptext class.
I'm unsure where to go from here or what to include in any external file in order for importing this on each page. Thanks.
Greeting,
I am trying to use local anchor in a web page, but it doesn't work. The local anchor's URL like this:
https://hostname:port/info?newElement=true#a
If I use this URL to load the web page directly, I can see the web page is located in the correct position where the local anchor is. But if I click the hyper link in the web page, nothing happens, though I can see the URL is correct in the footer when I hover mouse on the hyper link.
The web page is not reloaded and the URL in the browser's address box is not changed to the URL with "#a" at end. Is it due to the web page is an active web page?
Below is the code sample:
"form.jsp":
<div>
<div>
<jsp:include page="form-nav.jsp" />
<div>
<jsp:include page="form-location.jsp" />
....
</div>
</div>
</div>
"form-nav.jsp":
<div>
<ul class="tab">
<li>
Name
</li>
....
</ul>
<div>
"form-location.jsp":
<div id="location" class="page">
...
</div>
Thanks,
Zhe
DEMO
Here is an example of how to use the anchor tag.
Anchor syntax:
Link text
Referenced Element:
<div id="someid">You content goes in here</div>
everyone,
by further codes reading, I found the problem now. There is a override of the hyper link's click behavior in a js file:
$("body..... ul.tab li a").on('click', function() {
...
return false;
})
By deleting this override logic, the local anchor works well now. Thanks a lot for your comments!
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>
Please I need your help with the code below. I want to add an onclick event to a whole DIV to redirect to an url but I cannot bypass the href included in a child anchor inside the DIV.:
i.e. (The goal is to redirect to google.com clicking anywhere on the image or the text):
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
This works fine when I use a local URL like 'file:///E:/Documents/Blog/Design/Tmp1.html' (I don't know why).
Thank you.
Update: I'm adding the idea behind this request: I need this for the Index section of my blog that Blogger builds with the same routine that it uses for individual posts. In the Index I want that every click in the main Div redirects to the Post, but inside the post a click in the image must goes to the image's href. My idea was that the "onclick" event it's added dinamically to the DIV only for the Index section.
If you're intent on doing this inline (not recommend but it's your code), you can add a return false; to the inner anchor:
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/" onclick="return false;">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
Update: based on step 2 of your request (this is a terrible, terrible idea for a number of reasons but it works):
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/" onclick="if ( this.parentElement.parentElement.onclick ) { return false; }" id="demo">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
Set an onclick handler using javascript. the code would look something like this:
document.getElementById("mydiv").onclick = function(){
// navigate to new page
window.location.href = 'URL';
}
You will need to add an id to your div and pass it properly in the getElementById function.
You can also try something like this:
<div onClick="window.open('http://www.google.com','_blank');">
Change _blank with _self if you want it to open in same window.
Hello!!
i have a question and i haven't found any solution for it anywhere...
So, I have a button that link to internal div page (#page2) with a very long list, I need that the internal div page will be "loaded" before the transition will start...
Here is a very simple Sample Code:
<!-- Page #1 -->
<!-- ... -->
<div data-role="content">
<p>View internal page: goto Page 2</p>
</div>
<!-- ... -->
<!-- Start of Page #2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<ul><li>...</li>
<li>...</li>
<!-- About 300+ of: <li>...</li> -->
</ul>
</div>
So, Clicking over The link to #page2 should give you jquery mobile "Loading..." And after it "loaded" the content the transition should begin..
The reason Im doing it in the same page it that im inserting to the page#2 div dynamically all facebook friends (Long list), and it take a long time from the Click and until the transition begin...
Here is a nice example of what i need:
http://www.mpdtunes.com
Just go to: Live Demo-> Login -> Click Artists...
Any suggestions are welcome!
Thank you very much!!!!
Basically you want to do this:
Use button like this:
goto Page 2
Add a click event to it:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#to-page2', function(){
// Load internal page content
});
});
Where #index is an id of your button containing page.
Show loading animation aka ajax loader
setTimeout(function(){
$.mobile.loading('show');
},1);
SetTimeout is needed because web-kit browsers have a problem with dynamically triggered ajax loader.
Load your internal page content. Now if you are using 1 HTML page with multiple pages you can append new content to listview immediately. This is because listview is already loaded into the DOM. If you are using several HTML pages then store your page content into localstorage variable.
Hide ajax loader, again with setTimeout.
Start page transition with:
$.mobile.changePage("#page2");
If you have 1 HTML page then this is it. If you have stored your page content inside a localstorage then you will need to load it during the pagebeforeshow event of a second page, like this:
$(document).on('pagebeforeshow', '#page2', function(){
// Load internal page content from local-storage and append it
});
Last step is listview page content initialization. For that look at my other answer, just look for a topic regarding listview.