Div switch effect JavaScript - javascript

I have 4 divs that hide and unhide with JavaScript by clicking the menu on the top of the page. I have got this:
<script type="text/javascript">
function showHide(d) {
var onediv = document.getElementById(d);
var divs= ['content1', 'content2', 'content3', 'content4'];
for (var i = 0; i < divs.length; i++) {
if (onediv != document.getElementById(divs[i])) {
document.getElementById(divs[i]).style.display = 'none';
}
}
onediv.style.display = 'block';
}
</script>
Now I want to add the an effect that when you show a new div it comes rolling in from the top, like this "http://www.templatemonster.com/demo/48152.html". Can you do this with JavaScript or do I need jQuery? If I need to make use of jQuery which one must i use?

You can achieve this using jQuery's $show(), $hide() and $toggle() methods.
Adding a parameter of milliseconds will cause a delay.
$toggle(500);

Yes for effects you will nedd jQuery. Just replace
document.getElementById(divs[i]).style.display = 'none';
onediv.style.display = 'block';
with
document.getElementById(divs[i]).slideUp();
onediv.slideDown();
Call your ( showHide(d) ) function on document ready.

Hi you can use JQuery slide down method for this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(document.getElementById(d)).slideDown();
});
</script>

Related

How to make a text slider that moves next or previous in javascript?

Ok so I've revised the markup/code to make it easier to understand. Using JavaScript I want to know how to create a text slider that changes a paragraph in html5 either "forwards" or "backwards" on click?
I only want one div to show at a time and the first div (div_1) needs to be visible at the beginning as a default setting. I also want to be able to add more text divs to it in the future. I'm new to JavaScript so I want to keep it as simple as possible.
I've had a go creating it in JavaScript which hasn't worked, I'm not sure if I'm going about this the right way.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.showHide {
display: none;
}
</style>
<script type="text/javascript">
var sdivs = [document.getElementById("div_1"),
document.getElementById("div_2"),
document.getElementById("div_3"),
document.getElementById("div_4")];
function openDiv(x) {
//I need to keep div_1 open as a starting point
sdivs[0].style.display ="block";
var j;
for (var j = 0; j < sdivs.length; j++) {
if (j === x) {
continue;
}
else {
sdivs[j].style.display = "none";
}
}
}
</script>
<title>text</title>
</head>
<body>
forward
backwards
<div id="text_holder">
<div id="div_1" class="showHide">One</div>
<div id="div_2" class="showHide">Two</div>
<div id="div_3" class="showHide">Three</div>
<div id="div_4" class="showHide">Four</div>
</div>
</body>
</html>
When dealing with multiple elements like this, I've found CSS alone to be insufficient (though its brilliant for modifying simple hover states or whatever). This one method here is pretty simple and specific to this one set of markup (so modify as you see fit). More importantly - its to illustrate how to set up a simple javascript "class" to handle your logic.
http://jsfiddle.net/1z13qb58/
// use a module format to keep the DOM tidy
(function($){
// define vars
var _container;
var _blurbs;
var _blurbWidth;
var _index;
var _clicks;
// initialize app
function init(){
console.log('init');
// initialize vars
_container = $('#text_holder .inner');
_blurbs = $('.blurb');
_blurbWidth = $(_blurbs[0]).innerWidth();
_clicks = $('.clicks');
_index = 0;
// assign handlers and start
styles();
addEventHandlers();
}
// initialize styles
function styles(){
_container.width(_blurbs.length * _blurbWidth);
}
// catch user interaction
function addEventHandlers(){
_clicks.on({
'click': function(el, args){
captureClicks( $(this).attr('id') );
}
});
}
// iterate _index based on click term
function captureClicks(term){
switch(term){
case 'forwards':
_index++;
if(_index > _blurbs.length - 1){
_index = 0;
}
break;
case 'backwards':
_index--;
if(_index < 0){
_index = _blurbs.length - 1;
}
break;
}
updateView();
}
// update the _container elements left value
function updateView(){
//_container.animate({
//'left' : (_index * _blurbWidth) * -1
//}, 500);
_container.css('left', ((_index * _blurbWidth) * -1) + 'px');
}
init();
})(jQuery);
I'm using jQuery to handle event binding and animation, but, again - there are lots of options (including a combination of vanilla javascript and CSS3 transitions).
I'll note also that this is all html4 and css2 (save your doctype).
Hopefully that helps -

fade out on anchor click and fade in href

I would like to know if it is possible to make fadings between two HTML-Documents.
I have a few HTML-Pages but let's make an example with two of them.
index.html, jobs.html
On both I have a menu with <a> buttons. What I want to do is:
I click on Jobs and index.html (which I am currently on) fades out and jobs.html fades in. Something like fading between divs but with a whole HTML document.
Any helps is much appreciated.
Hide the body using css.
Fade in the body
Click a button and grab its ID
Fade out the body
Navigate to the new url
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: none;
}
.myBtn{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function(){
$('body').fadeIn();
$('.myBtn').click(function(){
url = $(this).attr('id') + '.html';
$('body').fadeOut(function(){
window.location = url;
});
});
});
</script>
</head>
<body>
<h1>index.html</h1>
<div class="myBtn" id="index">index</div>
<div class="myBtn" id="jobs">jobs</div>
</body>
</html>
http://jsfiddle.net/Dp4Hy/
PS. obviously the fiddle won't work, as you're trying to navigate to a new page, but you can still see the fade in at the beginning, and fade out when you click a button. Just need this script included for all pages to use.
Bottom line, this is not possible without some kind of pre-loading and interaction with a server side component
I would personally recommend PJAX. http://pjax.heroku.com/ It allows you not only catch an event and load a document based on the event, it updates the browser state, url, title, the back button works, etc.
example sites that use it to accomplish similiar behavior
http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013
http://reciperehab.com/blog/post/the-6-best-salads-for-spring
*disclaimer, I did the second one...
Create your anchor tag and set a javascript onclick event. Call your fadeOut() function (which i've pasted below) You'll want it to fade out when you click, and when the next page loads, you'll want it to fade in:
jsfiddle: http://jsfiddle.net/HmGap/3/
HTML:
<script type="text/javascript">
window.onload=function(){fadeIn('body')};
</script>
<div id="body">
Content <br /><br />
<a onClick="fadeOut('body')" style="cursor:pointer">Click Me to Fade Out</a>
</div>
Javascript:
//fadeEffects
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
// opacity ranges from 0 to 1
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',100);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',100);
window.location.href = "link.html";
}
Yes, it's possible, you can append the html in DIV (like you know), or you can use iframes, to manager the fade of the iframe tag

Collapsing JavaScript/HTML div on page load?

I need help collapsing a collapsible div on page load.
I'm using this JavaScript code:
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
document.getElementById('aboutme').style.display = 'none';
</script>
to collapse HTML div id="aboutme" when the <a ...>about me</a> is clicked:
<div class="container">
about me
<div id="aboutme">
sample text to be expanded and collapsed
</div>
</div>
I can't get the page to close my div#aboutme on page load.
I want this page to load with my div collapsed.
I thought that the JS line
document.getElementById('aboutme').style.display = 'none';
should do the trick but it doesn't. What am I doing wrong?
Thanks for your help.
If you want your div to load collapsed, simply write the following
<div id="aboutme" style="display:none">
sample text to be expanded and collapsed
</div>
This should resolve the problem.
However, if you are still interested in the JavaScript solution keep reading.
As you said I can't get the page to close my div#aboutme on page load - the problem is that you are not using "onload" event.
Simply put the line document.getElementById('aboutme').style.display = 'none'; in your body's onload attribute..
something like this
<body onload="document.getElementById('aboutme').style.display = 'none';">
...
</body>
and you should see the results with JavaScript. I recommend you use "style" method instead. much better.
Exactly how do you make that JS run on window load? It may simply run before the page is rendered
Does clicking on the link work? if it does, that would prove that the issue is simply the loading sequence
The easiest solution would be to place your code at the very end of your HTML file, just before the closing </body> tag. The code below is more generic, and can be placed anywhere. Note that to toggle the link back on I set the display to 'inline' (or block, i.e. whatever it was before - you may want to save that to a variable to be sure)
<script type="text/javascript">
function switchMenu(id) {
var el = document.getElementById(id);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'inline'; //or block - i.e. whatever it is rendered by
}
}
//add to the window onload event
if( window.addEventListener ){
window.addEventListener( 'load', function(){ switchMenu('aboutme')}, false);
} else if (window.attachEvent) {
window.attachEvent("onload", function(){ switchMenu('aboutme') } );
}
</script>

Trying to add a mouseover effect to this Javascript code

Hello am trying to add a mouse over effect to this code but ive been unsuccessful in doing so, Any help would be great... Am not sure if you will need anymore info but if so I can add anything you need
The problem I have is that when I over over the Tab's I can click the text and it highlights it all :( am after the normal mouse over effect if that can be done
Thanks
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
To add a mouseover effect in jquery, try it like this:
$('#your id / .your class').bind('mouseover', function() {
alert('hello world');//YOUR CODE HERE
});
I don't see any mouseover events in your code, check the API here:

Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)

Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.
The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).
Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I can't figure out how to make sure only one div element is visible at any one time.
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>
The links to make the JavaScript work looks like this:
< href="#" onclick="toggleVisibility();">About
< href="##" onclick="toggleVisibility1();"> Products
here is another, simple function
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
if you click here, #foo will change visibility
<div id="foo">blablabla</div>
Without jQuery, you would want to do something like this:
<style type="text/css">
.content {
display: none;
}
#about {
display: block;
}
</style>
<script type="text/javascript">
function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
</script>
About
Products
<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>
Example here: http://jsfiddle.net/frDLX/
jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.
This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
About
Products
<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
Simple solution is like this:
<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="about"){
document.getElementById("about").style.visibility = "visible";
document.getElementById("products").style.visibility = "hidden";
}
else if (divid="products")
{
document.getElementById("products").style.visibility = "visible";
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
< href="#" onclick="toggleVisibility('about');">About
< href="##" onclick="toggleVisibility1('products');"> Products
use CSS display: property
element disappear
document.getElementById("products").style.display = "none";
element appear and is displayed as block (default for div)
document.getElementById("products").style.display = "block";
I posted sample code here: jQuery: menus appear/disappear on click - V2
PS
Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html

Categories