Make div visible at a location on the page - javascript

Basically I am looking for a code that makes a div visible on a certain location on the webpage. when you scroll trough the website you get at certain headings when you are at a specific heading the div needs to get visible in the navbar.
The div #greybar is the div that needs to get visible only on a certain location while scrolling, the whole navbar is fixed
HTML:
<div class="navbar">
<div class="container">
<div class="logo">
<img src="images/logotekst.png">
</div>
<div id="menubutton"><a onclick="playclip();" href="#homejump">Home</div>
<div id="menubutton"><a onclick="playclip();" href="#aboutjump">About</div>
<div id="menubutton"><a onclick="playclip();" href="#infojump">Info</div>
<div id="menubutton"><a onclick="playclip();" >test</div>
</div>
<div id="greybar"></div>
</div>
CSS:
#greybar {
width: 100%;
height: 5px;
background-color: #A4A4A4;
}

If you are using javascript and jQuery, you can have a look at jQuery functions
hover, show, hide, text. At the end of all pages, there are good examples.
EDIT: You should rather use class="menubutton" and not id="menubutton".
After that, you can use script like
<script>
$( "div.menubutton" ).hover(
function() {
$( "#greybar" ).text( $( this ).text());
$( "#greybar" ).show();
}, function() {
$( "#greybar" ).hide();
$( "#greybar" ).text("");
}
);
</script>
EDIT 2:
add to greybar class position: fixed;

Related

How can i find element which is below to the another element?

I am trying to drag and sort images using jquery UI. I have cloned element which is I am trying to drag. I need to show a line between two images based on cloned image position. How can I achieve this? Thanks in advance.
Here is the one example.
http://jsbin.com/owuxek/9/edit?html,js,output
I am showing images instead of "Item A Item B.." Now I need to show a line between two li's while one 'li' is moving.
EDIT: That is, when I click "and pick" an image and hover it onto the list of images already in place, I wish to show a 'separator line' between the images over which I am currently hovering, so as to indicate to the user where the image would be placed if user releases the mouse click.
In the attached JSbin code, when I move an element from the list above and try to move it into the list below, a small white separating space appears between the elements of the list below, over which the mouse hovers. I need to replicate this effect for the below element layout.
<div id="single_album_grid" class="sortable">
<div id="divId1">
<img class="assetImg" id="imageId1" src="url">
</div>
<div id="divId2">
<img class="assetImg" id="imageId2" src="url">
</div>
<div id="divId3">
<img class="assetImg" id="imageId3" src="url">
</div>
</div>
This is my updated code:
$( "#divId1" ).draggable({
containment: $('#single_album_grid'),
helper: 'clone'
});
$( "#divId1" ).droppable({
drop: function(event, ui) {
}
});
If you use jquery UI sortable widget, it automatically inserts a placeholder element to at the target position.
You can style it like a line or whatever else you want with .ui-sortable-placeholder selector via css.
$(function() {
$("#single_album_grid").sortable()
});
div div {
height: 50px;
background: dodgerblue;
border: 2px solid white;
}
.ui-sortable-placeholder {
visibility: visible !important;
height: 5px;
background: hotpink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="single_album_grid" class="sortable">
<div id="divId1">
<!--img class="assetImg" id="imageId1" src="url"-->
</div>
<div id="divId2">
<!--img class="assetImg" id="imageId2" src="url"-->
</div>
<div id="divId3">
<!--img class="assetImg" id="imageId3" src="url"-->
</div>
</div>
over: function (event, ui) {
//code here
}
out: function (event, ui) {
//code here
}
worked for me!!

Automatically Scrolling a webpage with animating div

I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.
You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/
I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers

display different text on different links

In this when i click on photos the target div gallery gets displayed.I want to display the target div with some effects like ease-in or ease-out or slide effects etc. so that it looks more attractive.Initially the target div gallery is not displayed as in css there is display:none for gallery.I also tried the transition property for this but its not working.So plz help me with this.
<div>
<ul id="nav">
<li>Home</li>
<li id="gallary">Photos</li>
</ul>
</div>
<div id="gallery">
<h3 style="font-family:'Comic Sans MS';color:white;font-size:25px;text-align:center;font-weight:bold;">GALLARY</h3>
<div id="gallary_images"><img src="slide1.jpg"/></div>
<div id="gallary_images"><img src="slide3.jpg"/></div>
<div id="gallary_images"><img src="slide4.jpg"/></div>
<div id="gallary_images"><img src="slide5.jpg"/></div>
<div id="gallary_images"><img src="slide1.jpg"/></div>
<div id="gallary_images"><img src="slide5.jpg"/></div>
</div>
the CSS for this is
#gallery:target
{
display:block;
}
#gallery
{
border:solid black thin;
display:none;
position:absolute;
}
It sounds like this jQuery function is suitable for your needs:
http://api.jquery.com/fadeIn/
There is an example on the above page, which I've modified for you to try out:
$( "#gallary" ).click(function() {
$( "#gallery" ).fadeIn( "slow", function() {
// Animation complete
});
});
I've assumed you want to click on <li id="gallary">Photos</li> to make the contents of appear.
If I may add a couple of further comments - try renaming your element ids to be more descriptive, and to be aware you've used both 'gallary' and 'gallery' spellings which makes it hard to read. Also, a single id should be unique, whilst the same class can be used multiple times.
Finally - don't use comic sans! :D
Edit: I've added your extra requirement to close on backspace:
$('html').keyup(function(e){if(e.keyCode == 8)
$( "#gallery" ).fadeOut( "slow", function() {
// Animation complete
});})
As I mentioned in comment 8 = backspace, 36 = escape key.

Depending on which div href one clicks on one page, loads a different section of a slider on the second page?

One page has a slider containing some divs.
Another page has a bunch of divs.
How do I make it so that, when I click a certain div on the first page,
it links the user to the corresponding slider div? Right now, everything starts "ContentBox1." I also have it initialized with it's css being "left: 0;"
HTML of Slider page:
<div id="Content">
<div id="ContentBox1" class="active">
<div id="ContentBox2" ></div>
<div id="ContentBox3" ></div>
<div id="ContentBox4" ></div>
</div>
Here's Slider JS - Operates on click of a separate menu arrow div:
var $target = $($('.active').next());
$('.active').each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({ left: -($this.width()) }, 750);
});
$target.addClass('active').css({ left: ($target.width()) }).animate({ left: 0 }, 500);
It's easy to do in pure CSS. Not sure how to do it with jQuery though.
Linking page
<a href="/foo#ContentBox1">
Linked page
<div id="ContentBox1">
CSS of linked page
div { transition: left 1s; }
div:target { left: 100px; }

jQuery hide div, show div with new content

I am trying to retract my div, then show it with new content based on which link they clicked.
HTML:
<div id="menu">
<ul>
<li>about</li>
<li>contact</li>
<li>cv</li>
</ul>
</div>
<div class="content">
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$(".content").hide('slide', {direction: 'right'}, 1000);
$("#"+clicked).show('slide', {direction: 'left'}, 1000);
});
});
</script>
CSS:
.content {
position: absolute;
left:303px;
top: 200px;
width: 100%;
margin-top: 200px;
background: #6c7373;
}
#content_1, #content_2, #content_3 {
display: none;
}
What happens is: the div retracts, but does not reappear at all, what is going wrong here?
Thanks.
First, notice that the container for all of the potential DIVs has the content class so it's being hidden as well. Since the container is hidden, it won't matter if you "show" one of the contained elements. Second, note that the "hide" statement and the "show" statement will have a race condition since they will both apply to the element that's being hidden. It would be better to show the item in the callback to the hide operation or exclude it from being hidden.
<div class="content_wrapper"> <!-- give it a different class -->
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clickedID = '#' + $(this).attr('title');
$(".content:not(" + clickedID +")").hide('slide', {direction: 'right'}, 1000);
$(clickedID).show('slide', {direction: 'left'}, 1000);
});
});
</script>
Change the outer .content to .content-wrapper.
Show and hide are both working at the same time. To avoid the conflict (and not hide then show the content that's visible if the user clicks the same item twice), show the one you want and hide the others by selecting them using siblings()
Working demo
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$("#"+clicked).show(1000).siblings().hide(1000);
});
This will also solve the problem you have that you have given the wrapper div the class of .content too.
Also your ul li structure is wrong. You need the a tags inside the li. li must come directly after ul.

Categories