Rearranging element order responsive design - javascript

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>

Related

How to change background image to another upon hovering over button?

I have five buttons on one image. Every time you hover over each button, I would like the background image to change according to each button you hover. I tried doing this using CSS, but this doesn't seem to be very effective when applying the "hover" effect. It only works if you hover over the background itself and it will change, but not when you hover over a button.
And if I tried applying the CSS "hover" effect by adding a class in the li section and a sort of image sprite just under the primary background image, the image would only appear within the li itself and not as a background cover.
I figured jQuery/javascript would be better. But, I'm not sure how to apply what I would like. I tried to do a hover action with javascript, but I'm not sure why it isn't working. The following code is snippet from the main code on JSFiddle. Does anyone have suggestions?
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
You need to import jQuery library to make things work in jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>

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. (..)

How to link a complete DIV container?

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%;
}

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.

Replace class depending on event

If have a set of collapsible elements, in which I need to replace classes left and right depending on event isCollapse:
<div class="collapsible-set">
<div class="collapsible">
<h3>
<a class="left">
<span class="left"></span>
</a>
</h3>
</div>
<div class="collapsible">
<h3>
<a class="right">
<span class="right"></span>
</a>
</h3>
</div>
</div>
I need to toggle the classes. Is there an eaiser way to do this than what I came up with?
if (collapse) {
$('.left').addClass('topLeft').removeClass('left');
$('.right').addClass('topRight').removeClass('right');
} else if (!collapse) {
$('.topLeft').addClass('left').removeClass('topLeft');
$('.topRight').addClass('right').removeClass('topRight');
}
There must be an eaiser way to do this without writing so much code...
look at toogleClass http://api.jquery.com/toggleClass/
$('.collapsible:eq(0)').find('a').toggleClass('topLeft').toggleClass('left');
$('.collapsible:eq(1)').find('a').toggleClass('topRight').toggleClass('right');
This should do the trick
$(".collapsible").find(".topLeft, .left").toggleClass("topLeft", collapse).toggleClass("left", !collapse);
$(".collapsible").find(".topRight, .right").toggleClass("topRight", collapse).toggleClass("right", !collapse);

Categories