I am designing a webpage in which I want that when a user click on link a popup (new window) will open with a linked webpage.
My code looks like below
<head>
<script language="javascript">
function win(add,w,h)
{
window.open(add,"","width="+w+",height="+h+",location=0,directories=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1,top=5,left=5");
window.location.reload();
}
</script>
</head>
<body>
<h1>Click to open link in new window</h1>
<ul>
<li>Account Master
<ul>
<li>New</li>
<li><a href="#" value="mod.html" onclick="win(this.value,600,500)" >Modify</a></li>
<li>Delete</li>
<li>View</li>
</ul>
</li>
</ul>
</body>
In Firefox on clicking the link a popup appear but no link open(means it open only blank page) and in IE popup appear with link(/undefined) not the link provided link.
I am unable to detect what is the error.
Try this...
<head>
<script language="javascript">
function win(add,w,h)
{
window.open(add,"","width="+w+",height="+h+",location=0,directories=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1,top=5,left=5");
window.location.reload();
}
</script>
</head>
<body>
<h1>Click to open link in new window</h1>
<ul>
<li>Account Master
<ul>
<li>New</li>
<li><a href="mod.html" value="mod.html" target="_blank" onclick="win(this.href,600,500)" >Modify</a></li>
<li>Delete</li>
<li>View</li>
</ul>
</li>
</ul>
</body>
Whether or not a link opens in a tab or window is determined by the user's browsers settings. You may want to rethink your end-solution.
Instead of displaying your linked page in a "new window/tab", try firing a modal. Here are some nifty modal effects that are easy to implement
http://tympanus.net/Development/ModalWindowEffects/
use this property of anchor tag target="_blank"
<a target="_blank" href="link.html">Link</a>
Related
How to navigate to sections inside a webpage without remembering history? That is, suppose I use the following code. When I click on About, it takes me to the About section. But it also adds #about in the URL. The problem is, if I click 10 times alternating between Home and About to navigate inside the page, then when I click the browser back button I backtracks all my actions like a stack. I want it to completely come out of the webpage. How to achieve this?
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<ul class="nav">
<li> Home</li>
<li> About</li>
</ul>
<section id="home" style="margin-top: 100%">
Home Sweet Home!
</section>
<section id="about" style="margin-top: 100%">
About Me
</section>
</body>
</html>
PS: If it is not possible with only html, using java Script is fine.
You can do the job with pure HTML like this:
<body>
<ul class="nav">
<li> Home</li>
<li> About</li>
</ul>
<section id="home" style="">
Home Sweet Home!
</section>
<section id="about" style="display: none;">
About Me
</section>
</body>
It's just so you get the idea, but in practice, you should write more organized JavaScript and probably need help from a library like JQuery to build a useful website or app with navigation. Even in this example, there's a lot of room for improvement:
There's a lot of long and repetitive code crammed in it, a problem an external JavaScript script or app will solve.
Thanks to history.pushState, the button link and browser back/forth works as expected (look in the address bar to see the URL change without refreshing page), but as soon as you refresh page, you'll get an error. You need a web server to serve the right content for this to work, with help from the client too.
Update
Improved version with organized script and animation to demonstrate what you can do with in-file CSS and script.
<!DOCTYPE html>
<head>
<title>testing</title>
<style>
section {
position: absolute;
left: -800px;
top: 100px;
transition: left .6s;
}
section.visible {
left: 200px;
}
</style>
<script>
function navTo(page) {
if (page === 'about') {
document.getElementById('home').classList.remove('visible');
document.getElementById('about').classList.add('visible');
history.pushState(null, null, 'about');
} else {
document.getElementById('about').classList.remove('visible');
document.getElementById('home').classList.add('visible');
history.pushState(null, null, 'home');
}
}
</script>
</head>
<body>
<ul class="nav">
<li><a href="#home" onclick="event.preventDefault();navTo('home')">
Home</a></li>
<li><a href="#about" onclick="event.preventDefault();navTo('about')">
About</a></li>
</ul>
<section id="home" class="visible">
Home Sweet Home!
</section>
<section id="about">
About Me
</section>
</body>
</html>
use:
element.scrollIntoView()
element=document.getElementById("element's id")
in html:
<a onclick="elementId.scrollIntoView()">element name</a>
note: any tag will do... the <a> will lose the underscore and color change - could be fixed with style. how about (flat, with style) buttons?
Bootstrap's site tell us,
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.
In the following code, which is considered to be "via JavaScript" there is the following script:
<script type="text/javascript">
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
I was under the impression that this block of code will be necessary for the dropdown to work if we wanted to toggle "via Javascript" but I can erase that block and the dropdown will still work via the data attributes, but if I erase the data attributes the dropdown won't work at all.
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
</script>
</head>
<body style='margin:30px'>
<div class="dropdown" id="myDropdown">
<a class="myDropdownHandle" data-toggle="dropdown" data-target="#" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</body>
</html>
This jQuery code will make it so that upon the loading of the page, your dropdown list would be showing, as in, the contents of the drop down list will be visible.
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
Therefore, if you don't want the dropdown toggled on page load, then remove this piece of code. However if you remove the data attribute, your dropdown will not behave as one.
Reference this W3School Link will further clarify for you. Here is an example which shows the dropdown toggle in action.
If you read the bottom of the section here
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
All this line does, it decide whether you want to automatically open the menu.
$(document).ready(function () {
$('.dropdown-menu').dropdown('toggle');
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
<ul>
I've got the following html code:
<div id="menuItems" class="hidden">
<ul>
<li><a class="fgMenuItem" href="#">MenuItem #1</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #2</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #1</a></li>
<li><a class="fgMenuItem" href="#">SubItem #2</a></li>
</ul>
</li>
<li><a class="fgMenuItem" href="#">MenuItem #3</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #4</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #3</a></li>
<li><a class="fgMenuItem" href="#">SubItem #4</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".fgMenuItem").bind("click",function() {
alert('test');
});
});
</script>
I'm using Filament Group's iPod menu and the menus are working fine, but my jQuery code is not working. I'm trying to make it so that when an item is clicked, it executes my alert('test');.
I suspect the problem may be that Filament Group is overriding my click event handler, but I'm not sure how to fix it. I tried going into their javascript file and changing all the .click(function() { to .bind("click", function() {, but this didn't seem to make any difference. Any suggestions would be great!
Just tested and all working fine for me, you are including jQuery at the top of your document right?
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
</head>
$(function() {
$(".fgMenuItem").on("click",function() {
alert('test');
});
});
JSFiddle: http://jsfiddle.net/jv584/
EDIT: If you're able to set up a fiddle or provide more code (working demo page perhaps?) then I'll take another look and see if I can spot the problem
I want to refresh a mobile web page on-swipe. The html code is very basic, and just need the necessary jquery/javascript to get the swipe to reload the current page.
Here is the HTML: http://jsfiddle.net/yKpLJ/1/ I am pulling in jquery and jquery ui as well, but don't know how to move forward.
<div id="fact-footer">
<ul>
<li class="share facebook">
Share It
</li>
<li class="share twitter">
Tweet It
</li>
<li class="refresh">
Refresh Fact
</li>
<li class="logo">
Logo
</li>
</ul>
</div>
Thanks!
Check out HammerJS http://eightmedia.github.io/hammer.js/
Include the script on your page and then do something like this:
var element = $('body');
Hammer(element).on("swipeleft", function() {
location.reload();
});
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help