I have this code in my html source
<body>
<a class="android">back to home page</a>
</body>
how can i use inline js/jquery code to say if android phone click "back to home page" button href= "x.com" else href= "z.com"
I want to use inline source js/jquery in my html document
You can use the following code in
<a class="android" id="android" >back to home page</a>
let anchor = document.getElementById("android");
if (screen.width <= 640) {
anchor.href="link"
}
else{
anchor.href="link2"
}
<script type="text/javascript">
var isAndroid = / Android/i.test(navigator.userAgent.toLowerCase());
if (isAndroid)
{
document.getElementById("abc").href = "https://stackoverflow.com/;
}
else {
document.getElementById("abc").href = "https://link2";
}
Related
function swapstylesheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet)
}
<!--style.css-->
body{
background-color:#ffffff;
}
li{
color:#000000;
}
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<li type="button" onclick="swapstylesheet('stylenight.css')">Night Mode</li>
<li type="button" onclick="swapstylesheet('style.css')">Day Mode</li>
</body>
I am trying to implement a button on my HTML website that toggles the CSS for the current website and all of the other pages on my site using JavaScript. The problem is that when I change to the other CSS file and then switch the page, it goes back to the original CSS file (keep in mind that I am new to JavaScript). If it's any help, this will be toggling day/night mode.
<!--stylenight.css-->
body{
background-color:#000000;
}
li{
color:#ffffff;
}
You will have to set cookies in the browser when the user clicks the Day/Night Mode Button.
and read the cookie value to set the Mode when user comes back to your original page.
You can read more about setting and reading cookies in javascript here:
https://www.w3schools.com/Js/js_cookies.asp
You are looking are something like this on clicking the button:
document.cookie = "mode=Day;";
Also you will need a function to read the cookies when the page loads:
(From How do I call a JavaScript function on page load?)
window.onload = function() {
readCookieAndSetMode();
};
And on readCookieAndSetMode() you should read the cookie using
var x = document.cookie;
and depending on x swap the CSS (I leave that part to you).
All the above answers is not right, i will write here some code for bloggers to apply dark mode on own blogs..and remains until button pressed... check this on my blog Hindi Tutor working well.. 100% working, and dark mode is not going to off when you refresh the page..
<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
var cc = document.body.className;
if (cc.indexOf("darktheme") > -1) {
document.body.className = cc.replace("darktheme", "");
if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
localStorage.setItem("preferredmode", "light");
} else {
document.body.className += " darktheme";
if (opener) {opener.document.body.className += " darktheme";}
localStorage.setItem("preferredmode", "dark");
}
}
(
function setThemeMode() {
var x = localStorage.getItem("preferredmode");
if (x == "dark") {
document.body.className += " darktheme";
}
})();
//]]>
</script>
<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}
<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
</div>
I made a little web-based web browser for a web-based OS I made. I noticed that in some sites, they have links that like to open in new tabs. Is there a way that this can be prevented and have the links open in the iframe instead?
Here's my code for the whole browser just in case:
<html>
<head>
<link href="./browser.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
</head>
<body>
<div id="help">
<form action="help.html"><input type="submit" value="Help"></form>
</div>
Address:
<div id="logo">
<img src="stallion.png">
</div>
<input type="text" style="width: 400px;" name="url" id="url">
<input type="button" value="Go" id="load">
<div>
<input type="image" src="back.png" height=25 width=25 onclick="back()">
<input type="image" src="forward.png" height=25 width=25 onclick="forward()">
<input type="image" src="refresh.png" height=26 width=26 onclick="refresh()">
</div>
<iframe frameborder=0 class="netframe" src="http://www.bing.com/" id="main_frame"></iframe>
</body>
<script>
function back()
{
window.history.back();
}
</script>
<script>
function forward()
{
window.history.forward();
}
</script>
<script>
function refresh()
{
var iframe = document.getElementById('main_frame');
iframe.src = iframe.src;
}
</script>
</html>
There is two choices
1 : You can check all of the html in the iframe on each change and look for "target=_blank" and if so replace with "target=_self"
2 : Which I think would be the better way is, when the user clicks on an anchor tag check to see if the anchor has the attribute "target=_blank" if they do, simply remove it and then click the link.
I have provided a jsFiddle below
https://jsfiddle.net/L5dhp80e/
Html
<a class="newTab" href="http://www.google.com" target="_blank">
New Tab Google
</a>
<br />
<a class="removeBlank" href="http://www.google.com" target="_blank">
Removed Target Blank Google
</a>
Javascript
$(function () {
$('a.removeBlank').on('click', function () {
if ($(this).attr('target') == "_blank") {
$(this).attr('target', '_self');
}
$(this).click();
return false;
})
});
However if the iframe content is cross domain I don't think you can edit any of the code at all.
Get DOM content of cross-domain iframe
I found this answer in the web:
window.open = function (url, name, features, replace) {
document.getElementById('#iframe').src = url;
}
or with jQuery:
window.open = function (url, name, features, replace) {
$('#iframe').attr('src', url);
}
I haven't already tested it, but i hope it works.
Add target="_self"
<iframe src="http://google.com" target="_self"></iframe>
Target Attributes are:
_self = Opens the linked document in the same frame as it was clicked (this is default)
_blank = Opens the linked document in a new window or tab
_parent = Opens the linked document in the parent frame
_top = Opens the linked document in the full body of the window
framename = Opens the linked document in a named frame
Information from:
http://www.w3schools.com/tags/att_a_target.asp
I want a Pure JavaScript code that will change an image and also its link to another image and another link on same place as toggle function. I have a web page and I have Anchors Links button as <img src="DownArrow.png"/> and I want that after clicking on this image, first it will lead you to the DIV2 and then it will change the code to <img src="UpArrow.png"/>. How to do this using pure JavaScript? Waiting for perfect reply and code?
This should work:
var link = document.querySelector('#arrow a');
link.onclick = function() {
var image = document.querySelector('#arrow a img');
if(this.href.slice(-1) === '1') {
this.href = '#DIV2';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1uparrow.png';
} else {
this.href = '#DIV1';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1downarrow.png';
}
}
See it in action here: http://jsfiddle.net/TM9ap/7/
Note that I've changed the href attribute in the link to #DIV1 like this <a href="#DIV1">
<!DOCTYPE html>
<html>
<title></title>
<head></head>
<body>
<a href = "#DIV1" style="color:BLACK;" onclick="execute();">Click me
<img src="UpArrow.png" />
</a>
<div id="DIV1" ></div>
<div id="DIV2" ></div>
<script>
function execute()
{
if ( document.getElementsByTagName("a")[0].getAttribute("href")==="#DIV1"){
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","DownArrow.png");
img.parentNode.setAttribute("href","#DIV2");
}
else
{
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","UpArrow.png");
img.parentNode.setAttribute("href","#DIV1");
}
}
</script>
</body>
</html>
Following code is working fine for me IE but not working in Chrome.
i want to open the link in same page in HTML by java script
<SCRIPT LANGUAGE="javascript">
function clickHandler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
if(xsp.charAt(0)=="M") {
var oC=document.getElementById("C"+xsp.substr(1));
if(oC.style.display=="none")
oC.style.display="";
else
oC.style.display="none";
}
}
</SCRIPT>
html code is as following
<html>
<BODY onClick = "clickHandler();">
<a href="javascript:void(0)">
<u><b><span id=M26>2011-2012</span></b></u>
</a>
<div id=c26 STYLE="display:none">
<a href="javascript:void(0)">
<u><b><span id=M27>2012-2013</span></b></u>
</a>
</div>
<div id=c27 STYLE="display:none">
</div>
</body>
</html>
You use a upperCase C inside the function, but the ID starts with a lowercase c
var oC=document.getElementById("C"+xsp.substr(1));
has to be
var oC=document.getElementById("c"+xsp.substr(1));
Requested modification(you must remove the onclick from the body-element)
<script>
document.onclick=function(e){
var _this=(window.event)//reference to the clicked element
? event.srcElement//IE
: e.target;//others
if(_this.id.match(/^M(\d+)$/)){//extract the number
try{
var oC=document.getElementById("c"+RegExp.$1);//target-element
oC.style.display=(oC.style.display=='none')//set the display
?''
:'none'
}catch(e){}
}
}
</script>
I have an html page. Here, I am using tabview of Yahoo API. That is :
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><em>Top Stories</em></li>
<li><em>Finance</em></li>
<li><em>Sports</em></li>
</ul>
<div class="yui-content">
<div><p>Top Stories</p></div>
<div><p>Finance</p></div>
<div><p>Sports</p></div>
</div>
</div>
In the onClickEvent the functions used, fetch data from Google NEWS>
function TopStories(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=TopStories";
}
function FinanceNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Finance";
}
function SportsNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Sports";
}
But the Output is navigation to NEWS page. But, I want to display them as Tab Content.
What should I do ?
You can use iframe for this purpose .. see below example ,,
Using Jquery tab, its always create a div where your result display. You have only way to open external link on your page using .
<li><a href=ReturnIfram()><span>Google</span></a></li>
href get a string which contain ifram like
public string ReturnIfram()
{
return "<iframe src="http://google.fr"></iframe>"
}
try above in javascript see below example
<html>
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://developerfusion.com/");
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}
</script>
</head>
<body>
<p>GO! </p>
</body>
</html>