How to link a complete DIV container? - javascript

i have the following div Container (including a background image).
<div class="haus"></div>
how can i link this DIV to an url?

use the <a> tag :
<a href="">
<div class="haus"></div>
</a>

Pretty Easy , like this :
<a href="htps://www.google.com">
<div class="haus">
This is div
</div>
</a>
Working fiddle : http://jsfiddle.net/xhGud/4/

Use this if you want to keep the next element in the same line
<a href="htps://www.google.com">
<div class="haus" style='display:inline-block'>
text
</div>
</a>
or just
<a href="htps://www.google.com">
<div class="haus">
text
</div>
</a>
This is also fine withe some JS work
<div onClick="self.location.href='http://www.google.com'" class="haus"></div>

Surround the div with the a-link tag
<a href="#">
<div class="haus"></div>
</a>
Or you can use onClick
<div onClick="self.location.href='http://www.google.de'" class="haus"></div>
Or a "experimental" way is to add the div a <a> link and call it over jQuery:
<div class="haus">
link
</div>
jQuery Script:
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});

I would do it the other way around. by making the a to take all the div space. Live Fiddle
That way, it will validate under any doctype.
personally I think it's clearer that way. but, its debatable.
HTML:
<div class="haus">
This is link in the div
</div>
CSS:
.haus
{
background-color: azure;
height: 50px;
}
.haus a
{
display: inline-block;
width: 100%;
height: 100%;
}

Related

Change Text on another Div

Good evening Community,
I have a problem with my code.
HTML:
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
I want if I hover over the div "mbubble" that the class "thome" will change it's text. I tried to do that by making them visible / invisible.
CSS:
#mbubble:hover ~ .thome { visibility:hidden; }
#mbubble:hover ~ .tabout { visibility:visible; }
But it's sowhing no affect?
Can you tell me how you would do that? Or at least any way that's working to change the text by hovering?
Best regards,
Michael
How about this:
$('#mbubble').hover(function () {
$('.thome').html('<p style="letter-spacing:10;">NOW IT IS DIFFERENT</p>');
})
If your structure is really that simple, then a trick with pointer-events could work:
the idea is to kill pointer-events on a and reactivate it only on #mbubble, since when you hover a child, parent is hovered too, the selector can be taken from the parent .
a {pointer-events:none; }
#mbubble {pointer-events:auto;}
a:hover + #title .thome , .tabout {display:none;}
a:hover + #title .tabout {display:block;}
<a href="aboutme.php">
<div class='aboutus'>i don't trigger anything
<div id="mbubble">
I DO
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
Now, if you realize that without pointer-events but only a;hover it works , you may understand it can be usefull only if there is other content in <a> that should not react . only clicking on #mbubble will fire the link.Was your example too little ? if not, just use a:hover
http://caniuse.com/#search=pointer-events
It look doable in css, anyway, while not recommmended, there is a quick inline solution in javascript using the transversal DOM, like this:
You got to keep in mind that it can have strange behaviors, non easily copiable by right clicking, this is why inline javascripts should not be used directly. There is workaround around it, good luck.
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="document.getElementById('title').children[0].children[0].textContent='Enter the void!'" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
So a more nicer way is to use a function like this:
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="changeText()" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
<script>
function changeText() {
document.getElementById('title').children[0].children[0].textContent='Enter the void!'
}
</script>
Still, this isn't clean enough, the good way in javascript is to add an event listener, like this:
-
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome">
<p style="letter-spacing:10;">Text BEFORE</p>
</div>
<div class="tabout">
<p style="letter-spacing:10;">Text AFTER</p>
</div>
<script>
var toBeWatched = document.getElementById('mbubble');
toBeWatched.addEventListener("mouseover", function(event) {document.getElementById('title').children[0].children[0].textContent
= 'Enter the void!';setTimeout(function() { document.getElementById('title').children[0].children[0].textContent
= 'Text BEFORE!!!';
}, 2500);
}, false);
</script>
This way the html part is left untouched. (..)

assign an <a> tag to a div using javascript or jQuery

I'm working on a website on WordPress and the following code is being generated by a WordPress theme several times:
<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class=" width2 white all portfolio-post portfolio-thumbnail no-padding">
<figure class="portfolio-thumbnail-container">
<div class="thumbnail-image">
<img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
</div>
<figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
<h5 class="heading heading-underlined portfolio-thumbnail-heading">
My site
</h5>
<ul class="portfolio-category list-inline">
</ul>
</figcaption>
</figure>
</div>
And I need to move the <a> tag on each generated piece of code to "wrap" another section of the code, It should be like this:
<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class=" width2 white all portfolio-post portfolio-thumbnail no-padding">
<a href="http://mysiste.com/relaunch/portfolio/mysite/">
<figure class="portfolio-thumbnail-container">
<div class="thumbnail-image">
<img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
</div>
<figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
<h5 class="heading heading-underlined portfolio-thumbnail-heading">
My site
</h5>
<ul class="portfolio-category list-inline">
</ul>
</figcaption>
</figure>
</a>
</div>
Since I can't edit the code because everything is generated by WordPress shortcodes. Is there a way to do it using JavaScript or jQuery for all the generated divs?
There might be cleaner solution, but this will get the job done in jQuery
$(function(){ // is runned after the page loads
$('.portfolio-thumbnail-container').each(function() {
var a = $(this).find('a'); // extract <a/> in a variable
a.parent().html(a.html()); // replace the content of a's parent with a's content
$(this).wrap(a.empty())); // wrap the thumbnail-contailer with the <a> tag, replacing the old content of a with ''
});
});
Note that with this solution all elements with class portofolio-thumbnail-container will be altered and it requires that the 'a' tag is always inside the h5. If your page does not meet these, you may need to change some selectors. If you're having problems with that leave a comment.
demo: https://jsfiddle.net/2gtq7qo9/1/
in javascript without jQuery
[].forEach.call(document.querySelectorAll('div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a'), function(a) {
var h5 = a.parentNode;
var figure = h5.parentNode.parentNode;
var div = figure.parentNode;
div.appendChild(a);
h5.textContent = a.textContent;
a.textContent = '';
a.appendChild(figure);
});
div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a doesn't have to be so nasty - whittle it down to maybe something like div.portfolio-post a or something like div[id^="post-"] a as per the jQuery answer
You just have to apply that div id
document.getElementById("lnk").href = "https://jsfiddle.net/Parth_Raval/67n70pe2";
This is very easy with jQuery:
$(".portfolio-thumbnail-container").click(function(){
window.location.href = "http://mysiste.com/relaunch/portfolio/mysite/";
});

Rearranging element order responsive design

My markup is
<div class="info-container">
<span class="item1">item1</span>
<a class="item2" href="#">item2</a>
<a class="item3" href="#">item3</a>
</div>
I want to rearrange to below when my media width gets to 800 px (#media (min-width: 800px))
<div class="info-container">
<a class="item2" href="#">item2</a>
<span class="item1">item1</span>
<a class="item3" href="#">item3</a>
</div>
I have only used angularjs so far for my application (the above code is in a view attached to a controller). What is the best way to achieve this? Should I use angularjs to do this?
Or is the only way to do this using JS or JQuery inside my controller? I dont want to use a flexbox solution.
There is a great article about this problem here:
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
A simple solution would be to duplicate the span.item1 after a.item2 and have display:none; on it. When the width is above 800px you would display it and hide the first span.
So you would have:
<div class="info-container">
<span class="item1">item1</span>
<a class="item2" href="#">item2</a>
<span class="item1" style="display:none;">item1</span>
<a class="item3" href="#">item3</a>
</div>
<style>
#media (min-width:800px){
.info-container .item1
{
display:block;
}
.info-container:first-child
{
display:none;
}
}
</style>
this any good ? ## Edit Doesn't work on SO snippet for some reason, fiddle added
JS FIDDLE
$( window ).resize(function() {
if( $('document').width() <="800"){
var span=$('span.item1');
span.remove();
$('a.item2').append(span);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-container">
<span class="item1">item1</span>
<a class="item2" href="#">item2</a>
<a class="item3" href="#">item3</a>
</div>

How to change arrow icon button on click with jquery

I have button icon this.. at click event i want to change it as it .. right now i am applying this code for jquery
<script>
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').slideToggle();
});
</sript>
what should change to change left cursor arrow to right cursor arrow in jquery? please help me with code
You can use toggleClass to swtich between two images. Assign each image to a class and switching between classes using toggleClass will change the image on click.
Live Demo
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').toggleClass("left-image right-image");
});
here is working demo of your problem
i create a active class which change background-image.
toggling active class fullfill your requirement
here is your css
.tab {
background: url('http://i.stack.imgur.com/dzs9m.png') no-repeat;
padding-left:50px;
}
.tab.active {
background: url('http://i.stack.imgur.com/euD9p.png') no-repeat;
}
.hi {
display:none
}
and here is your JS
(function(){
$('div[id^="module-tab-"]').click(function(){
$(this).toggleClass("active").next('.hi').slideToggle();
});
}());
hey #Jeetendra Chauhan thanx but still not get what i want.. here is anther code of html..
<div id="tab-module-row" style="display:none;">
div class="module-row module-tab module-details pull-right">
<b>Details:</b>
<span class="grey-line"></span>
<div id="module-tab-details" class="hello-sugg">
<img src="images/icons/icon-orangeboxarrow-right.png" class="right"> Some error is here <span class="pull-right">
<img src="images/icons/icon-chat.png" data-toggle="modal" data-target="#commentBox">
<img src="images/icons/icon-alert.png"> </span>
</div>
<div class="hi" id="hi1" style="width: 95%;display:none;">
<span class="grey-line"></span>
<b>Suggested steps:</b><br>
<ol>
<li>Step one to resolve the issue. Try this one first!</li>
<li>Second Step to resolve the issue. Try this one first!</li>
</ol><br>
<img src="images/icons/icon-charcoalarrow.png"> Add Comments<br>
<img src="images/icons/icon-charcoalarrow.png"> Update / Test Data<br> <br>
</div>
<span class="grey-line"></span> </div>
</div>

using z-index in correct way

I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>​
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});​
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.

Categories