Im fairly new to javascript. Ive adapted some script Ive found to do something similar to what I need but its not working as I'd like it too. I apologize for the long explanation.
I have 6 buttons, button 1 -3 responsible for the left divs, and button 4 - 6 responsible for the divs on the right.
When the script run, none of the divs should be visible.
When buttons#1 is clicked, div#1 slides out from the left and is then positioned its own width from the left of the container. This is the same for div#2 and div#3 corresponding to button#2 and button#3. Only 1 div can be seen at a time so button#2 will hide div#1 and div#3 and show div#2, ect. Same for all the other buttons.
When button#4 is clicked, div#4 slides out from the right and is positioned its own width from the right of the container. The hiding of the divs when another button is clicked is the same as the above, only 1 div can be seen at a time.
Help would greatly be appreciated.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.button-left').click(function() {
var index = $(this).index(".button-left");
var $box = $(".box-left:eq(" + index + ")");
$(".box-left").not($box).animate({
left: '150%'
}, 500);
if ($box.offset().left < 0) {
$box.css("left", "150%");
} else if ($box.offset().left > $('#container').width()) {
$box.animate({
left: '25%',
}, 500);
}
});
$('.button-right').click(function() {
var index = $(this).index(".button-right");
var $box = $(".box-right:eq(" + index + ")");
$(".box-right").not($box).animate({
left: '150%'
}, 500);
if ($box.offset().left < 0) {
$box.css("left", "150%");
} else if ($box.offset().left > $('#container').width()) {
$box.animate({
left: '105%',
}, 500);
}
});
});
</script>
<style type="text/css">
#container {
position: absolute;
margin: 0px;
margin-left:auto;
margin-right:auto;
padding: 0px;
width:1024px;
height:568px;
overflow: hidden;
background-color:#999999;
}
.box-left {
position: absolute;
width: 200px;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
.box-right {
position: absolute;
width: 200px;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left:260px;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
right:0px;
}
#box5 {
background-color: purple;
}
#box6 {
background-color: brown;
}
</style>
<div class="button-left">Click Box #1 </div>
<div class="button-left">Click Box #2 </div>
<div class="button-left">Click Box #3 </div>
<div class="button-right">Click Box #4 </div>
<div class="button-right">Click Box #5 </div>
<div class="button-right">Click Box #6 </div>
<div id="container">
<div id="box1" class="box-left">Box #1</div>
<div id="box2" class="box-left">Box #2</div>
<div id="box3" class="box-left">Box #3</div>
<div id="box4" class="box-right">Box #4</div>
<div id="box5" class="box-right">Box #5</div>
<div id="box6" class="box-right">Box #6</div>
</div>
jsfiddle.net/KFqvf
This is a jsfiddle with what I think you want in. Just needs simple jquery animate function to slide in left and right, and a simple menu to select the items!
Hope this helps
Related
I am making sort of a drop down list but more of a button, and i needs to be able to look good. I have almost got every thing I need but when i move the mouse onto the box that appears (drop down list), it disapears. This is what I have so far;
html
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
css
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
jquery
$("#box").hover(
function() {
$("#content").slideDown(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
$("#content").hover(
function() {
$("#content").show(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
Anything I am doing wrong, better ways to do this or a link to an existing question that already answers this would be very much appreciated. Thanks!
Here is exactly what you wanted.
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
https://jsfiddle.net/kvbvLy4d/
You could also achieve this without any Javascript / JQuery by animating the height of the content with CSS.
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#box:hover + #content, #content:hover {
height: 10vw;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 0;
background-color: red;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
<div id="buttons">
<div id="box"></div>
<div id="content">content</div>
<div id="box1"></div>
<div id="content1">content</div>
<div id="box2"></div>
<div id="content2">content</div>
</div>
I have three elements that are fixed, when they reach a certain section in the page, I want them to transition into the next element,but not just disappear and change. At the divides I want to be able to see the top fixed element half and the bottom fixed element half. EX: If the top element is red and bottom element is blue then at the divide I should see a box that has half red and half blue.
Here is what I have so far, but right now each element just disappears, I want it to appear that it is sliding under the next fixed element. (I messed around with the z-index but this solution didn't work b/c both items are fixed to the same spot)
HTML:
<body id="body">
<div id="background">
</div>
<div id="red">
<div class="fixedContainer" id="something">
This is Just a test
</div>
</div>
<div class="mdl-grid" id="blue">
<div class="fixedContainer2" id="something2">
This is Just a test2
</div>
</div>
<div class="mdl-grid" id="green">
<div class="fixedContainer3" id="something3">
This is Just a test3
</div>
</div>
CSS:
#background {
height: 900px;
background-color: black;
z-index: 1;
}
#red {
height: 900px;
background-color: red;
}
#blue {
height: 900px;
background-color: blue;
}
#green {
height: 900px;
background-color: green;
}
.fixedContainer {
z-index: 10;
position: fixed;
background-color: #ddd;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.fixedContainer2 {
z-index: 5;
position: fixed;
background-color: #ffff00;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.fixedContainer3 {
position: fixed;
background-color: #dd1144;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
JS
$('#something').hide();
$('#something2').hide();
$('#something3').hide();
$(document).scroll(function() {
if ($(document).scrollTop() < 700) {
$('#something').hide();
$('#something2').hide();
$('#something3').hide();
} else if ($(document).scrollTop() > 700 && $(document).scrollTop() < 1580) {
$('#something3').show();
$('#something2').hide();
$('#something').hide();
} else if ($(document).scrollTop() > 1580 && $(document).scrollTop() < 2490) {
$('#something2').show();
$('#something3').hide();
$('#something').hide()
} else if ($(document).scrollTop() > 2490) {
$('#something2').hide();
$('#something').show()
}
});
https://jsfiddle.net/zs4emw00/4/
Here is the https://jsfiddle.net/zs4emw00/5/
You create an overall container and set that container to overflow: hidden;
Then have that fixedContainer set to position:absolute. The jquery part is to always keep all the fixedContainer at the top of the window.
HTML:
<div id="background">
</div>
<div id="red" class="container">
<div class="fixedContainer" id="something">
This is Just a test
</div>
</div>
<div class="mdl-grid container" id="blue" >
<div class="fixedContainer" id="something2">
This is Just a test2
</div>
</div>
<div class="mdl-grid container" id="green">
<div class="fixedContainer" id="something3">
This is Just a test3
</div>
</div>
CSS:
#background {
height:900px;
background-color: black;
z-index: 1;
}
.container{
position:relative;
height:900px;
overflow:hidden;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
.fixedContainer {
z-index: 10;
position:absolute;
background-color:#ddd;
padding: 2em;
left: 50%;
top: 0;
transform: translate(-50%);
}
Javascript
$(document).scroll(function() {
var $target = $('container');
var winHeight = $(window).scrollTop();
var offsetArr = $('.container').each(function(){
var top = $(this).offset().top;
var difference = winHeight - top;
$(this).find('.fixedContainer').css('top',difference);
})
});
I have a little trouble with scrolling the div content only on mouse move. So no scrollbars are shown etc.
So I have 17 items. Every item is square 50x50 px. Mask is 300x50. So my mask is overflow: hidden and itemsWrapper has width of all subitems. I want to make scroll items horizontally on mousemove event. Can enyone give me some advice on this?
For now I have the following code:
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>
Also the number of items can be dynamically changed so I have another trouble to make it working.
Is this almost what you intends??
Just add the following style rules:
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
Demo
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>
Task:
Make a chat on Skype in HTML.
Problem:
No scrolling content after adding a new message.
Description:
There is a common site structure: header, content and footer. It is necessary that the content would be "hiding" under the header, but in the visible part of the window remained only part of the content (lower (message history on Skype)).
When you add a new message, the content must scrolling up to the height of this, new messages, and the message should appear at the bottom of the central block of the site (content), but should not go under the footer.
In this case it shall remain possible scrolling.
HTML:
<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="container" class="f_right">
<div id="wrap3">
<div id="wrap2">
<div id="wrap1">
<div id="content">
<div id="im_nav_wrap">asdasdasdasd</div>
<div id="im_content">
<div class="im_rows_wrap">
<div id="im_rows" class="im_peer_rows">
<div class="mes">sddsfsdfsdfsdf</div>
<div class="mes">sdfdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">sdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
</div></div>
</div>
<div id="im_footer_wrap">
<textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
<button onclick="IM.send(this);">submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
width: 980px;
margin: 0 auto;
}
#header {
top: 0;
z-index: 100;
text-align: center;
width: 980px;
position: fixed;
height: 40px;
background: #cdcdcd;
}
#sidebar {
top: 60px;
width: 200px;
height: 100px;
background: #666;
position: fixed;
}
.f_right {
width: 600px;
float: right;
}
#content {
}
#im_nav_wrap {
position: fixed;
top: 40px;
z-index: 100;
width: 400px;
height: 70px;
background: #ff0ccc;
}
#im_content {
padding: 120px 0 150px ;
}
#im_rows {
}
.im_rows_wrap {
position: relative;
}
#im_rows {
position: absolute;
bottom: 80px;
width: inherit;
}
.mes {
width: 200px;
padding: 10px;
background: #f6f6f6;
margin-top: 10px;
}
#im_footer_wrap {
height: 100px;
width: 300px;
position: fixed;
bottom: 20px;
}
JS:
$(document).ready(function() {
$('.im_rows_wrap').height($('#im_rows').height());
});
IM = {
send: function(el) {
var ta = $(el).prev('textarea').val();
if (ta) {
$('#im_rows').append('<div class="mes">' + ta + '</div>');
$('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
}
}
};
So you want something like:
http://jsfiddle.net/CLzfW/7/
Using a bit of jQuery
$('.button').click(function(e){
e.preventDefault();
$('.expander').slideToggle();
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
});
It scrolls to the bottom of the div on an event click (e.g button click, new message) and you also want a scroll bar on it?
i am new to JS and need some help please!
I have 2 Boxes(divs) that have a slider in each one. When I mouse over anyone of them, both sliders are activated.
How would i make it so each div is activated separately.
here are my pictures of what I am doing, might make it a little more clear:
pic.twitter.com/1ju3iZ0KIM - before mouse over
pic.twitter.com/gmfhl1zl2J - with mouse over
Thanks so much!
This is my JS
<script type="text/javascript">
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 170
}, 200)
})
});
</script>
my divs
<div class="squareFeedBox">
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>
</div>
<div class="squareFeedBox">
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>
</div>
My css
/Content Boxes/
.squareFeedBox
{
background-color: #fff;
width: 278.5px;
height: 207px;
margin-right: 16px;
margin-bottom: 16px;
float: left;
border-radius: 3px;
box-shadow: 2px 2px 5px #0f2134;
overflow: hidden;
}
/*upSlider*/
.up-down
{
overflow:hidden;
height: 207px;
width: 278.5px;
}
.slide
{
width:278.5px;
height:207px;
}
.default
{
background-color:#fff;
height: 170px;
width: 278.5px;
}
.onhover
{
background-color:#1DB7CB;
height: 207px;
width: 278.5px;
}
$(document).ready(function(){
$('.up-down').mouseover(function(){
$(this).find('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$(this).find('.default').stop().animate({
height: 170
}, 200)
})
});
Using $(this).find will find the specific .default which is contained within the current element, rather than every .default.