Suppose I have 4 visible divs:
- 2 on top
- 2 on the bottom, wrapped in a container
and 1 hidden div.
When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.
When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.
I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.
So there are the questions:
- Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?
- What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?
Code example here: http://jsfiddle.net/Xq9kr
You can create implicit links through structure.
For example with this HTML:
<div class="top">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="bottom">
<div>Div 1</div>
<div>Div 2</div>
</div>
You can then select the respective div in the top via indices:
$('div.bottom > div').hover(function () {
var index = $(this).toggleClass('highlight').index();
$('div.top > div').eq(index).toggleClass('highlight');
});
Or you can create explicit links through data attributes and IDs.
<div class="top">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
<div class="bottom">
<div data-for="div2">Div 2</div>
<div data-for="div1">Div 1</div>
</div>
Then select like this:
$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');
Related
I am using fullpage.js for my website.
I was wondering if I can add a non-sticky menu to all my sections,
I have tried just to put the menu code on all my website section, But it is make my website slowly. Someone have any ideas?
So you want for each individual section to have its own menu?
In that case this might do
html:
<div id="fullpage">
<div class="section">section 1</div>
<div class="section">
<div class="sectionMenue">This is the menue for section 2</div>
section 2
</div>
<div class="section">
<div class="sectionMenue">This is the menue for section 3</div>
section 3
</div>
<div class="section">section 4</div>
css:
.sectionMenue {
position: absolute;
top: 0px;
}
JSFiddle
fullpage will modify all of the sections once it runs, making the positions of all the sections fixed. that means that any absolute positioning inside one of these sections will position it relative to the section itself. Hope that makes sense
I tried to search for this topic with no luck.
I want to display content in my webpage in multiple rows and with each row, I want to have next and back buttons when the contents are more than the page width.
A good example is Youtube
I found good toturials about carousel, but I am not really looking for carousel or at least it doesn't look like what I am looking to implement.
I hope that I was able to explain my question
I did something quite similarly in the past, I will try explain how I did it.
Firstly, here is the js fiddle:
https://jsfiddle.net/VoidZA/fxudjony/
It is something around the lines of:
<div class="container-holder">
<div class="click-prev nav-button">Prev</div>
<div class="outsideViewBefore container">Container Before</div>
<div class="inView1 container">Container 1</div>
<div class="inView2 container">Container 2</div>
<div class="inView3 container">Container 3</div>
<div class="inView4 container">Container 4</div>
<div class="inView5 container">Container 5</div>
<div class="outsideViewAfter container">Container After</div>
<div class="click-next nav-button">Next</div>
</div>
edit final:
Fixed up the code, and put an example into jsFiddle
I'm trying to get this panel menu to work. I've been working on it for hours without any success. I have it partially working. See fiddle here.
What I'm trying to do is:
When you click target 1, target 2, target 3 links. The div holding these links should slide out. Right now, it is only being covered and hidden by the next div that is sliding in. I would like it to slide out first to the left, and then have the next div slide in after.
After clicking one of the target links. Then when clicking "main menu" link, make the "target" box below (green, red, yellow boxes) slide out from right to left and have the "target menu" the one that loads initially, slide in from the left. Right now, I can't get that "main menu" link to do anything. It should show the initial target menu when clicked.
I know there is a lot of right and left stuff in there. But I wanted to be as specific as possible. I'm not really concerned about the direction of the slide. I am more concerned just to make it work first.
<div class="main-menu">Main Menu Link
</div>
<div id="right" id="target0">
This is the Target Menu<br />
Target 1<br/>
Target 2<br/>
Target 3<br/>
<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>
The #target0 is your entire element (it contains target1 target2 and target3)
You should break it out on its own:
<div class="main-menu">Main Menu Link
</div>
<div id="right" id="main">
<div id="target0" class="panel active">This is the Target Menu<br />
Target 1<br/>
Target 2<br/>
Target 3<br/>
</div>
<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>
EDIT:
To make the gray block slide, you should add your Panel class to it (I also added the active class so it displays by default). You'll just need to style it
div.panel.active {
display:block;
}
I have the following html and I want to change the divs around onclick. For example:
Initial
<div class="box1">Story 1</div>
<div class="box2">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
When I click on Story 2, it becomes
<div class="box2">Story 1</div>
<div class="box1">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
So .. whichever div is clicked will take the property of box1 and the others will become box2. Is it possible?
One more possible solution with toggleClass() method:
$("div").on("click", function() {
$(this)
.siblings(".box1")
.andSelf()
.toggleClass("box1 box2");
});
DEMO: http://jsfiddle.net/x8vxh/
Something like this perhaps:
$('.box1, .box2').click(function() {
$('.box1').addClass('box2').removeClass('box1');
$(this).addClass('box1').removeClass('box2');
});
It might be neater to have one box class for all boxes, and one active class that you add and remove, and the latter class could override the properties of the former. Would save you the trouble of toggling two different classes.
Try this
$("div").on("click",function(){
$(".box1").prop("class","box2");
$(this).prop("class","box1");
});
http://jsbin.com/igugop/3/edit
Below I have a small js based simulator for different command tools. The user enters a command, and if it's correct, it displays it at the top. For future uses, I need to make sure it can handle as many commands as needed before completing the simulation. This means inevitably I'll have content overflowing.
My solution now was setting the Y overflow to auto, adding the scrollbar, and a little jquery to keep the client scrolled to the bottom of the output div at all times, because the content is being appended below the previous content each time a user enters the correct command.
Right now this works fine, except I would like to remove the scroll bar. I'd like the content to behave in the same way overflow auto would and does, except without a visible scrollbar.
Is there a way I could do this with jquery or javascript?
I know I can do some css tricks to put some sort of black over the scrollbar with a z-index, but I'd like to avoid that if possible.
All you need is to add overflow: hidden to your container and scroll it once content is loaded:
div.scrollTop = div.scrollHeight;
Demo http://jsfiddle.net/nT75k/2/
Yes, you can add an event listener and when that event is emitted you can have it scroll down to the bottom by checking the height like so
$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;
$('.input').keypress(function (e) {
if (e.which == 13) {
$container = $('.container');
$container.append('<p class="row">' + e.target.value + '</p>');
$container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
}
});
http://jsfiddle.net/w2qbe/
Continue to use javascript to do the scrolling, and put the div containing your simulator inside another div that's slightly less wide and do overflow hidden on the outer div. I've used this technique a couple of times, and it's pretty fun.
The only thing your should be careful of is that scrollbars are slightly different widths in different browsers, so be careful.
for example:
html:
<div id="outside">
<div id="inside">
<div>more content 1</div>
<div>more content 2</div>
<div>more content 3</div>
<div>more content 4</div>
<div>more content 5</div>
<div>more content 6</div>
<div>more content 7</div>
<div>more content 8</div>
<div>more content 9</div>
<div>more content 8</div>
<div>more content 7</div>
<div>more content 6</div>
<div>more content 5</div>
<div>more content 4</div>
<div>more content 3</div>
<div>more content 2</div>
<div>more content 1</div>
</div>
</div>
css:
div#outside {
width: 120px;
height: 100px;
overflow: hidden;
}
div#inside {
width: 135px;
height: 100px;
overflow-y: auto;
}
Check out this fiddle -> http://jsfiddle.net/5bkz5/1/ <- and scroll down over the text!
div.scrollTop = div.scrollHeight;
but you do not need overflow: hidden.