Using a div as a link - option to open new tab? - javascript

Currently I'm using this small piece of js in my site to allow my div to act as a button:
<div id="item" onclick="location.href='http://www.google.com';" style="cursor:pointer;">Google</div>
But something I do very often when web browsing is opening a large amount of tabs. Is there any way I could modify my code to allow for this?

This should do it:-
<html>
<head>
<style>
.sampleDiv
{
position:relative;
margin:0px auto;
width:400px;
height:200px;
background-color:#CCCCCC;
text-align:center;
}
.actualLink
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
.linkText
{
position:relative;
top:80px;
}
</style>
</head>
<body>
<div class="sampleDiv">
<a class="linkText" href="test.html">testing</a>
<a class="actualLink" href="test.html"></a>
</div>
</body>
</html>
The link with class actualLink is covering whole of the div.
The link with class linkText is providing the text.
The purpose of using two tag is that if you only use actualLink then you cannot position the text wherever you want.By using the link with class linkText you have flexibility of centering(vertically) the text(horizontal centering can be done using only actualLink)

My solution was to replace the div blocks with anchor blocks. Anchor blocks can now take on the CSS styles of nearly anything a div can do, but it can also include href, which the browser will recognize and give you the right-click options you want to see.
So old:
<div class="divClass" onClick="location.href='http://www.google.com'">asdf</div>
becomes
<a class="divClass" href="http://www.google.com">asdf</a>

You can't directly do this, as it's a user setting on their browser whether windows open as new windows or as tabs.
There is target="_newtab" but that isn't widely supported.
So in the onclick:
window.open('page.html','_newtab');
But attempting to override a users browser preference isn't a good idea IMO.
To do it on a right click something like:
$('#item').mousedown(function(event) {
if(event.which == 3) { // right click
window.open('page.html','_newtab');
}
})

you could do:
onclick="window.open('http://www.google.com', somename);" ...
do you mean, something like:
..onmousedown="op(your_url,event);"..
function op(url,event) {
if (event.button == 2) {
window.open(url);
}
}

There is actually no cross-browser way to do this.
Forms or window.open will open a new window, not a new tab.
And don't try to create a link in memory and click it with javascript because chrome won't open the new tab, as a security feature.

use target="_blank"
Have a look here
Document : HTML <a> target Attribute
Demo : Try It

Related

how to create a simple popup window displaying only text, on a web site

I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';

Jquery click event repeats itself... sometimes

I'm having a weird (annoying) issue with a small jquery complement I'm coding. It is meant to control a small tabbed nav for content on a page, it's not meant to be a big deal. It currently has 3 buttons (tabs) and the system is meant to fade out the current tab and content and change to the new one when you click on any of the tabs.
jsfiddle
The HTML goes as follows:
<div class="fixed-wing-nav-cont">
<div class="fixed-wing-nav">
<div class="fixed-wing-nav-item" id="wing-nav-1">Features</div>
<div class="fixed-wing-nav-item" id="wing-nav-2">Benefits</div>
<div class="fixed-wing-nav-item active" id="wing-nav-3">Screenshots</div>
</div>
</div>
<div class="fixed-wing-tab-cont">
<div id="fixed-wing-tab-1">
Features Tab
</div>
<div id="fixed-wing-tab-2">
Benefits Tab
</div>
<div id="fixed-wing-tab-3" class="active">
<img src="images/screens.png" alt="screens" /> VIEW ALL
</div>
<div class="clear"></div>
</div>
And the CSS tied to it, just in case it might be important, is the following:
.fixed-wing-nav-cont{
width:100%;
border-bottom:1px solid #747474;
margin:20px 0;
}
.fixed-wing-nav{
display:table;
border-spacing:5px 0;
border-collapse:separate;
margin-left:-5px;
}
.fixed-wing-nav-item{
margin-right:40px;
height:40px;
color:#1c5fa9;
font-size:16px;
border-left:1px solid #1c5fa9;
border-top:1px solid #1c5fa9;
border-right:1px solid #1c5fa9;
text-align:center;
padding:0 10px;
display:table-cell;
vertical-align:middle;
cursor:pointer;
}
.fixed-wing-nav-item.active{
color:#fff;
background-color:#1c5fa9;
}
.fixed-wing-tab-cont{
position:relative;
width:100%;
height:400px;
}
.fixed-wing-tab-cont>div{
position:absolute;
top:0px;
left:0px;
width:100%;
height:400px;
overflow:hidden;
display:none;
}
.fixed-wing-tab-cont>div.active{
display:block;
}
.fixed-wing-tab-cont img{
border:none;
}
The Jquery complement is a very simple one - I know there are more elegant ways to do it, but I chose to go for what's meant to be faster to code, and simpler overall:
<script type="text/javascript">
$('#wing-nav-1').click(function(){
$('div.fixed-wing-nav-item').removeClass("active",function(){
$('#wing-nav-1').addClass("active");
});
$('#fixed-wing-tab-3').removeClass("active");
$('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
$('#fixed-wing-tab-1').fadeIn("fast");
});
});
$('#wing-nav-2').click(function(){
$('div.fixed-wing-nav-item').removeClass("active",function(){
$('#wing-nav-2').addClass("active");
});
$('#fixed-wing-tab-3').removeClass("active");
$('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
$('#fixed-wing-tab-2').fadeIn("fast");
});
});
$('#wing-nav-3').click(function(){
$('div.fixed-wing-nav-item').removeClass("active",function(){
$('#wing-nav-3').addClass("active");
});
$('#fixed-wing-tab-3').removeClass("active");
$('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
$('#fixed-wing-tab-3').fadeIn("fast");
});
});
</script>
I'm loading Jquery 1.9 straight from the jquery site. Now, the issue I'm having is this: The page opens with the third tab loaded, no problems. If I click to go to the first tab, it works perfectly: The third tab fades out, the first one fades in and the "active" state from the tab button is moved from the third to the first one. If I then choose to go to the second tab it also works perfectly. However, if I try to go from any tab to the third one or from the third to the second it plays the animation twice, which makes no sense whatsoever: All three tabs are running the same code. I've been looking at the code over and over for an hour and I can't see why this is happening - Why does the first tab work perfectly, but the third one have such issues? I've tried removing the "active" state from all items in the HTML (thus making the tab/content start empty) and the issue still happens.
Can anyone help me here? This just doesn't make any sense to me :\
You were fading out all of your DIVs under the class .fixed-wing-tab-cont. So the content loading twice was really just the content being faded out and fading back in. You can exclude the DIV with the active class using the CSS 'not' selector in jQuery. Change
$('#wing-nav-3').click(function(){
$('div.fixed-wing-nav-item').removeClass("active",function(){
$('#wing-nav-3').addClass("active");
});
$('#fixed-wing-tab-3').removeClass("active");
$('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
$('#fixed-wing-tab-3').fadeIn("fast");
});
});
to
$('#wing-nav-3').click(function(){
$('div.fixed-wing-nav-item').removeClass("active");
$('#wing-nav-3').addClass("active");
$('#fixed-wing-tab-3').removeClass("active");
$('.fixed-wing-tab-cont>div:not(.active)').fadeOut("fast");
$('#fixed-wing-tab-3').fadeIn("fast");
});
There is really no need for you to use callback functions in this instance. In fact, the removeClass method has no callback ability. You might have noticed that your active tab class wasn't being applied to the tabs you clicked on because of this.
Updated jsFiddle
You remove the 'active' class from the fixed-wing-nav-item divs correctly, but always remove the 'active' class from '#fixed-wing-tab-3', regardless of which of the tabs is active. If you removed the 'active' class from '.fixed-wing-tab-cont>div' and then add the 'active' class to the fixed-wing-tab you fadeIn it should work.

How to place lateral buttons to an iframe (for all browsers)?

I need to dynamically create iframes and to put some buttons (in column) on right of them, with buttons positions that follow the iframes ones.
I tried all the settings of
button.style.position = " "
inserting "absolute", "relative", etc. and trying to specify the pixel positions, but it doesn't work.
However, I have noticed that opening the same page with different browsers the buttons are placed in different positions.
I need a method that allows me to place the buttons at the right of the iframe, following its position and above all that returns the same result with all most used browsers.
What technique can I use?
Whats wrong with the basic premise of
<div id="left">
<iframe src="http://www.google.com"></iframe>
</div>
<div id="right">
<button>first button</button>
<button>second button</button>
</div>
#left, #right {
float:left;
width:46%;
height:300px;
margin:2%;
}
iframe {
width:100%;
}
button {
width:100%;
clear:right;
}
working example

creating an expandable area in a web page

I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?
I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html

Categories

Resources