Click one div and goes to another on responsive website - javascript

Hi I am trying to get my website to be responsive. I have two different divs one on the left and one on the right on my website like so...
http://jsfiddle.net/1fupx7aa/2/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
On the website, when I click on the red div, content appears on the yellow div.
I am now trying to make my website responsive, so what I would like to do is on a smaller screen, the yellow div I set to display:none; and the red div width:100% like so...
http://jsfiddle.net/3jmbxumb/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
#media (max-width: 600px) {
.menu {
width:100%;
}
.view {
display: none;
}
}
Now what I need to do is, when I click on the red div, I would like the content in the yellow div to appear where I would create a back button that would lead back to the red div.
Is this possible?
I have been looking at the bootstrap carousel option, but I don't think this works for my website.
What would I call this and is this possible? Might there be a way where if I click on the red div on a mobile device the red div becomes hidden and only the yellow div appears?

You can do this using jQuery and having a specific hidden class for small screens - so you don't have to check for screen width in js.
Javascript:
var showContent = function () {
var $yellow = $('#yellow-view'),
$this = $(this);
//Hide red and show yellow
$yellow.removeClass('hidden-small');
$this.addClass('hidden-small');
//Add content to yellow view
$yellow.html('<strong>my content</strong>');
};
$('#menu').click(showContent);
CSS:
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
#media (max-width: 600px) {
.menu {
width:100%;
}
.hidden-small {
display: none;
}
}
https://jsfiddle.net/s9wkbL9m/2/

You might want to use jQuery to do this.
$(document).ready(function(){
$('.menu').click(function(){
$('.view').fadeIn();
});
});
Here is the updated Fiddle.

A quick JS writeup that would work for your scenario
$(function(){
$(".back_btn").hide();
if($(window).width() <= 600){
$(".view").hide();
}
$(".menu").click(function(){
if($(window).width() <= 600){
$(".menu").hide();
$(".view").show().text("Some text");
$(".back_btn").show();
}
else {
$(".view").text("Some text");
}
});
$(".back_btn").click(function(){
$(".view").hide();
$(".menu").show();
});
});

Related

How to add a diffrent background image to different div elements on hover?

I have several div elements aligned in a grid. I want them to have their specific different background images when the user hovers over them which disappear when the mouse leaves the div. Basically it's a users information page where every square has the data of a user. When people hover over the squares, the users' images appear as background images. Here's the HTML:
<div class="contributor">
Some great stuff here
</div>
Here's the jQuery code I'm currently using. The problem: It assigns the same image to every div while I want different images for each div.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
$(this).addClass('visible');
});
$('.contributor').mouseleave(function(){
$(this).removeClass('visible');
});
});
Here's the code for the 'visible' class:
.visible{
background-image: url('../res/dev-1.png');
}
Why do you use jQuery? use just CSS and pseudo-class :hover.
.contributor:hover{
background-image: url('../res/dev-1.png');
}
apply for diffrent div:
.contributor.diff-div:hover{
background-image: url('../res/dev-2.png');
}
If you can do something in the CSS, it is almost always it will be a better solution than using JavaScript
First, save the image url in an attribute named "imageurl" (which isn't parsed by the browser):
<div class="contributor" imgageurl="../res/dev-1.png"></div>
<div class="contributor" imgageurl="../res/dev-2.png"></div>
Then, use this jQuery code:
$('.contributor').mouseenter(function(){
var imgageUrl = $(this).attr("imageurl");
$(this).css("background-image" , imgageUrl);
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
Of course, you also have to build the HTML dynamically.
may be you can consider css function instead of addClass.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
if(this.id == "one")
$(this).css("background-image" , "url('../res/dev-1.png')");
else if(this.id == "two")
$(this).css("background-image" , "url('../res/dev-2.png')");
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
});
Try this with jquery. suppose you have six images from dev-1.png to dev-6.png then it will set them as bacground for div number 1 to 6 respectively
$(document).ready(function(){
$('.contributor').mouseover(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:url('../res/dev-"+index+".png');";
$("this").eq(index).attr('style',bI);
});
$('.contributor').mouseleave(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:none";
$("this").eq(index).attr('style',bI);
});
});
For reference (Too troublesome and Won't apply if you have a ton of elements)
This can be achieved with pure CSS.
images might take a second to load (random image services)
Working example: (not responsive open in full page)
.optionlist li {
background: #111;
color: #999;
padding: .5em;
list-style-type: none;
border: 1px solid;
max-width: 70px
}
.optionlist li:hover {
background: red;
}
.optionlist li:hover:after {
content: '';
width: 800px;
height: 600px;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Start Background Control */
#red:after {
background: url(http://lorempixel.com/800/600/)
}
#blue:after {
background: url(http://lorempixel.com/800/601/)
}
#green:after {
background: url(http://lorempixel.com/801/600/)
}
#yellow:after {
background: url(http://lorempixel.com/801/601/)
}
#orange:after {
background: url(http://lorempixel.com/799/600/)
}
#white:after {
background: url(http://lorempixel.com/800/599/)
}
#black:after {
background: url(http://lorempixel.com/801/599/)
}
/* End Background Control */
<div class="optionlist">
<ul>
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="yellow">Yellow</li>
<li id="orange">Orange</li>
<li id="white">White</li>
<li id="black">Black</li>
</ul>
</div>

opacity of figcaption is mysteriously changing

I am trying to use jquery.caption (https://github.com/louisbros/jquery.caption). I want the caption to be in a black rectangle with white text. When I mouse over my images, some of them display the caption correctly, but others don't display it at all, and others display it very lightly and hard to see. As I mouse over the images, some that were displaying it stop displaying it. If I look at the HTML I can see that the opacity changes and that is why the caption are sometimes not visible. When I first bring up the page, most of the elements have opacity=1, but others will have a very small number like 0.00301952217705548. As I mouse around, elements that started with opacity=1 will change to a very small number.
Here is my code that creates the elements:
$image_div = $('<div />')
.addClass('gImage-row')
.appendTo($preview);
$image_div.append($('<a />')
.addClass('no-highlight')
.attr('href', "{{ IMAGE_DIR }}"+image.image.replace(/thumbnail/,'jpg'))
.attr('rel', "superbox[image]")
.append($('<img />')
.addClass('gImage')
.attr('alt', 'some text')
.attr('src', "{{ IMAGE_DIR }}"+image.image)
.attr('onerror', "noimage(event)")));
This is in a loop and it creates 30-40 images.
In my window.onload function I do this:
$('.gImage-row img').caption();
Here is my CSS:
.figure{
position:relative;
margin:0;
padding:0;
}
.figcaption{
position:absolute;
left:0;
bottom:0;
width:100%;
height:20px;
background-color: black;
foreground-color: white;
opacity:1.0;
}
a:hover.no-highlight {
background: transparent;
}
.gImage-row {
float: left;
text-align: center;
}
.gImage {
width: 150px;
height: 100px;
margin-right: 1px;
background-color: transparent;
}
.label {
float: left;
}
I cannot figure out what is making the opacity change or how to fix this. Anyone have any ideas?
So I think I figured out what is going on here. The code in jquery.caption was doing this:
$(this).bind('mouseenter.caption mouseleave.caption', function(){
$(this).data('caption').figcaption.stop().fadeToggle();
});
fadeToggle works by changing the opacity. Because I had so many images close together, when the user moused around there were a lot of mouseenter and mouseleave events, and each time one occurred it would call stop on the existing fadeToggle. This would leave the opacity at whatever it was at at the moment. I changed this to:
$(this).bind('mouseenter.caption mouseleave.caption', function(){
if ($(this).data('caption').figcaption.css('display') == 'none') {
$(this).data('caption').figcaption.show();
}
else {
$(this).data('caption').figcaption.hide();
}
});
And now it's working perfectly.

How can i make a div that slides up to reveal a page without completely hiding it?

I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>

jQuery Toggle does not show on window resize

I'm using jQuery slideToggle function and the media queries.
The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.
If I do not click on the toggle link, and resize the window back to large size, it works fine.
Demo to see the problem:
Please check the demo here, where you can see the problem:
http://jsfiddle.net/3Jj7J/
Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.
Here's my code:
HTML:
<div class="bar">
<a class="toggle" href="#">MAIN MENU</a>
</div>
<div class="nav">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
CSS:
.bar{
display: none;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
.nav ul {
display: none;
}
.bar{
display: block;
}
}
jQuery:
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
add on window resize event handler :
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.show();
}
});
jsFiddle : http://jsfiddle.net/3Jj7J/1/
update: this is alternative solution (just remove inline display property, so it will use css rule).
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.css({'display':''});
}
});
DEMO
I've read your problem and tested it myself. Now, I've made the Link appear by doing the following:
CSS:
#bar {
display: none;
color: #000000;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
#nav ul {
display: none;
}
.bar{
display: block;
}
}
To see for yourself (http://jsfiddle.net/hSZ7t/) What I've done is changed your CSS. Instead of you using:
.bar {
It's now:
#bar {

Move selection nipple to selected div ID on link click

I am working on a website that features many links on the same page:
http://www.alexanderlozada.com
To let the user know what item they are currently viewing, I'd like to implement a small triangle that points at the currently selected item.
example:
How could I go about doing this without making each link a separate page?
sample of the link I am working with- (I have to keep the current href and rel)
<a class="grey show_hide" href="#" rel="#projects" >
PROJECTS
</a>
In most cases this is done by using pseudo elements :before and/or :after like so (read full article)
CSS:
/* creates triangle */
.selected:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-2px;
left:50%;
width:0;
margin-left:-10px;
border-width:0px 15px 15px;
border-style:solid;
border-color:white transparent;
}
div.links {
display: inline-block;
position:relative; // you must have this to position the triangle propery
width: 25%;
height: 45px; // adjust height to fit the menu
float: left;
text-align: center;
font-size: 24px;
padding-top: 10px;
}
jQuery:
$(function(){
$('.show_hide').click(function(){
$('div.links').removeClass('selected'); // remove all other 'selected' links
$(this).parent().addClass('selected'); // sets the current .links to be selected
});
});
Add an active class in your :
<a class="btn active">menu link</a>
css:
.btn.active { background:url(cursor-active.png) bottom center no-repeat; }
js:
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
You can see here : FIDDLE

Categories

Resources