I have created tab style interface using css and javascript with only two tabs which is working fine.But i want to add more tabs to it and i am not getting how can i write javascript code for it to show current active tab and its contents and hide all other tabs and their contents
Following is my html code :
<div id="container">
<div id="tabbox">
Signup
<a href="#" id="login" class="tab select">Login</a>
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
</div>
This is my javascript code :
$(document).ready(function()
{
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
});
});
This is working fine for two tabs but if i add more tabs to it say :
<div id="container">
<div id="tabbox">
Signup
<a href="#" id="login" class="tab select">Login</a>
Basicinfo
contactinfo
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
<div id="basicbox">Basic information</div>
<div id="contactbox">Contact information</div>
</div>
</div>
Then if i use previous javascript function i will have to add lot more lines to it and i am not getting how can i do it in short and simple way.
What changes do i have to make in my javascript function..
I'd suggest the following:
$(".tab").click(function()
{
var x = this.id, // equivalent to $(this).attr('id'), but slightly faster/more-simple
show = $('#' + x + 'box');
if (show.length){
$('.contentBox').slideUp(500);
show.slideDown(500);
}
});
JS Fiddle demo.
Or the following (equivalent to the above, but using a callback):
$(".tab").click(function()
{
var x = this.id,
show = $('#' + x + 'box');
if (show.length){
$('.contentBox')
.slideUp(500,
function(){
show.slideDown(500);
});
}
});
JS Fiddle demo.
This assumes the following:
That all of the 'boxes' you want to show have the class of contentBox,
That the id of the 'box' you want to show takes the form of the id of the link that's clicked followed by the word 'box', so clicking the #signup link reveals #signupbox.
Edited to include a CSS-only option:
With the following HTML:
<div id="container">
<div id="tabbox">
Signup <!-- note the href -->
Login
</div>
<div id="panel">
<div id="loginbox" class="contentBox">Login Form</div>
<div id="signupbox" class="contentBox">Signup Form</div>
</div>
</div>
And the CSS:
.contentBox {
height: 0;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ms-transition: height 1s linear;
transition: height 1s linear;
overflow: hidden;
}
.contentBox:target {
height: 2em;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ms-transition: height 1s linear;
transition: height 1s linear;
}
JS Fiddle demo.
You are mixing ids (that have to be unique - you are using them multiple times) and classes in a weird way (you did before your edit...).
For a basic setup like:
<div id="container">
<div id="tabbox">
A <!-- note the URL fragments pointing to actual ids -->
B
C
D
</div>
<div id="panel">
<div id="A" class="tab">A Content</div> <!-- ID attributes are only used once -->
<div id="B" class="tab">B Content</div>
<div id="C" class="tab">C Content</div>
<div id="D" class="tab">D Content</div>
</div>
</div>
You could just use some lines of jQuery to get things working:
$('div.tab').hide().first().slideDown(); //show first
$('a.tab').click(function(){
var targetID = $(this).attr('href'); //store element that triggered the click event
$('div.tab:visible').slideUp(function(){ //hide visible tab
$(targetID).slideDown(); //slide down newly selected tab
});
});
See a working fiddle
Also read about ids and classes at MDN
Not tested but maybe works:
Javascript:
$(document).ready(function(event) {
$("#tabbox a:not(.selected)").click(function() {
$($("#tabbox a.selected").attr('href')).slideUp();
$("#tabbox a.selected").removeClass('select');
$(this).addClass('select');
$($(this).attr('href')).slideDown();
event.stopPropagation();
});
});
HTML:
<div id="container">
<div id="tabbox">
Signup
Login
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
</div>
if you give a class to the content divs before you open one tab you can close all the others e.g.
$(".tab-content").slideUp();
$("#loginbox").slideDown();
You also need to know which tab you have clicked on e.g.
$(".tab").click(function(){
var id = this.id;
var current_tab_content = '#'+id+'box';
$(".tab-content").slideUp();
$(current_tab_content).slideDown();
});
I have not tested this but hopefully you get the idea.
Related
I'm trying to make transition effect when you click on the left side of the sidebar.
For instance if you click Ottogi (ramen noodle's name) it should change the background image, and if you'd like to know about Sajo hapyo (ramen noodle's name), it should also change the background-image. Basically for all images in the sidebar (eg. natura, maloo, dongush, may).
My program that changes the background-image works, however it stops whenever user wants to click back ottogi, it's just stopped. So, I'm guessing I should either use conditional statements or loops because it basically doing the same thing.
Please help me with that, I'm struggling so hard.
This is the website that I'm working http://test1.testkz.ru/
HTML
<section id="main-showcase">
<div class="showcase-wrapper">
<div class="left-main col-lg-3 col-md-3">
<div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
<div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
<div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
<div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
<div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
<div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>
<div class="right-main col-lg-9 col-md-9">
<div class="inner-container">
<h1>Ottogi</h1>
<h2>Южно - Корейские продукты питания высочайшего качества!</h2>
</div>
<div class="box-container">
<div class="main-wrap">
<div id="main-slider" class="first-slider">
[[getImageList?
&tvname=`goods`
&tpl=`goodsSlider.tpl`
]]
</div>
</div>
</div>
</div>
</div>
CSS
.ottogi-bg {
background: url('/assets/template/images/main_03.jpg') no-repeat center;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.sajo-bg {
background: url('../images/about-us-company-bg.jpg');
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS
$('p.ottogi').click(function(){
$('.right-main').addClass('ottogi-bg');
});
$('p.sajo').click(function(){
$('.right-main').addClass('sajo-bg');
});
The reason is that you keep adding the class to the .right-main class. Which means that you end up with: .right-main .ottogi-bg .sajo-bg. Because sajo-bg is the last class you defined in your CSS it will always overule the ottori-bg class.
You could try this:
$('.ottogi').click(function(){
$('.right-main').removeClass().addClass("right-main ottogi-bg");
});
$('.sajo').click(function(){
$('.right-main').removeClass().addClass("right-main sajo-bg");
});
.right-main{
background-color:grey;
padding:20px;
}
.ottogi-bg{
background-color:blue;
}
.sajo-bg{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ottogi<br/>
sajo<br/>
<div class="right-main">
Test
</div>
With this you make sure that previous class is deleted and you then you can add the desired class.
I think problem is JavaScript code.
If user click ottogi, then click sajo.
.right-main div is added ottogi-bg class
.right-main div is added sajo-bg class
after two click, .right-main has two class. Maybe client side is confused.
this solution is like that...
set below code
$('.right-main').removeClass('sajo-bj');
after
$('.right-main').addClass('ottogi-bg');
I want to animate the showing and hiding of an element using animate.css and angular.
I have read this SO question and the angular documentation for ngShow and ngAnimate but still cannot get it to work.
I have tried the following setup on plunker, but it doesn't work.
app.js
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
});
index.html
<body ng-controller="MainCtrl">
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show === true">Show is true</div>
<div class="hide" ng-click="show = !show" ng-show="show === false">Show is false</div>
</body>
style.css
.show.ng-hide-add {
animation: fadeOut 5s linear;
}
When clicking on "show is true" (and therefor hiding it) I see it wait for 5 second before hiding, so there is something happening, but it doesn't fade out.
I can make it work if I add this to the css:
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}
However, I don't want to do it this way. I want to use animate.css's keyframes (I think that's the correct term, my css lingo isn't brilliant) such as fadeIn, fadeOut etc..
plunker to show what I am seeing.
What am I doing wrong? How can I use animate.css's keyframe animations with angular's ngAnimate?
You have to use .ng-hide class, as it's the class that is assigned once the condition in ng-show is false, or in ng-hide is true.
According to that you can edit your code like this:
.show.ng-hide,
.hide.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show,
.hide{
transition: all linear 0.5s;
opacity:1;
}
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show">Show</div>
<div class="hide" ng-click="show = !show" ng-hide="show">Hide</div>
-
EDIT:
In case you want to use the animate.css classes, for example .fadeIn and .fadeOut you have to assign the corresponding keyframes inside your css.
So you have to use the following CSS:
.show.ng-hide,
.hide.ng-hide{
animation-name:fadeOut;
animation-duration: .5s;
}
.show{
animation-name:fadeIn;
animation-duration: .5s;
}
IMPORTANT NOTE:
In order to make it work correctly in the plunker I have not used the 3.2.0 version suggested by the plunker external library finder, but I manually linked the 3.5.1 version adding the following code in the html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />
-
Working Plunker with full code
Change your code to this
<div ng-show="show">
<div class="show" ng-click="show = !show">Show</div>
</div>
<div ng-show="!show">
<div class="hide" ng-click="show = !show" >Hide</div>
</div>
.show.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show{
transition: all linear 0.5s;
opacity:1;
}
I have two paragraphs (lets say with id "p1" and "p2")
I would like to transition from one to another when a link is clicked, and vice versa when a different link is clicked. They are located on the same page but only one is displayed at a time (using javascript to hide one then display the other when the link is clicked).
Both paragraphs have "hidden page" as their classes.
Would the css resemble something like this?
.hidden {
opacity: 0;
display: none;
transition: opacity 1s linear;
}
.page {
transition: opacity 1s linear;
opacity: 1;
}
I know it's not that but would it be something similar?
EDIT:
Link to the gist of the css, js, and html files
https://gist.github.com/EricHanLiu/a4b09862f2d25b6c6e5f
edited out some things like name phone# email etc, but the main focus of is on the two paragraphs in the middle
If you are trying to fade in one paragraph when clicking on a link and faded the other one out if it is visible then you can do something like the following:
Live Preview
HTML:
<a id="first" href="#p1">1</a> <a id="second" href="#p2">2</a>
<div class="fadeIn">
<p id="p1" class="hidden">I am the first paragraph.</p>
</div>
<div class="fadeIn">
<p id="p2" class="hidden">I am the second paragraph.</p>
</div>
CSS:
.hidden {
opacity: 0;
}
/*fade in transition css below*/
.fadeIn p {
-webkit-transition: opacity 2.0s ease-in;
-moz-transition: opacity 2.0s ease-in;
-o-transition: opacity 2.0s ease-in;
}
.fadeIn p.clicked {
opacity: 1;
}
JavaScript:
//helper function to select the element by id
function $(id){
return document.getElementById(id);
}
//on click event for first
$("first").addEventListener("click",function(event){
//prevent page refresh or navigation
event.preventDefault();
$("p1").classList.add("clicked");
$("p2").classList.remove("clicked")
});
//on click event for second
$("second").addEventListener("click",function(event){
//prevent page refresh or navigation
event.preventDefault();
$("p1").classList.remove("clicked");
$("p2").classList.add("clicked");
});
As you said, you need two links to trigger the two paragraphs, respectively.
Here's my simple solution to your problem. I am not that sure that this is what you are looking for. But hopefully this helps!
<div>
<p class="show" id="p1">Paragraph 1</p>
<p class="hidden" id="p2">Paragraph 2</p>
Show Paragraph 1
Show Paragraph 2
</div>
<script type="text/javascript">
var sb1 = document.getElementById('sb1');
var sb2 = document.getElementById('sb2');
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
sb1.addEventListener('click', function() {
p1.classList.remove('hidden');
p1.classList.add('show');
p2.classList.remove('show');
p2.classList.add('hidden');
});
sb2.addEventListener('click', function() {
p1.classList.remove('show');
p1.classList.add('hidden');
p2.classList.remove('hidden');
p2.classList.add('show');
});
</script>
In the script above, I just switched the respective classes on the two paragraphs.
There a lot of solution to this, you can use jQuery to simplify this solution.
I'm using a script to make content boxes slide from the top upon entry and then slides down upon exit.
It's almost working perfectly however, when you click on the button for content box one, then content box two, then back to one again, one comes in from the bottom instead of the top.
I think I understand why this is happening (because the code runs all in one hit, and thus instead of going from below the viewport, to above the viewport and then into view, it just goes from below into view) but can't figure out how to make it always come in from the top.
HTML:
<div class="slidey slidey1 enter">
Content Box 1
</div>
<div class="slidey slidey2">
Content Box 1
</div>
<div class="slidey slidey3">
Content Box 1
</div>
CSS:
.slidey { top:-100% }
.enter { top:0; transition: all 0.7s ease-in-out; }
.exit { top:100%; transition: all 0.7s ease-in-out; }
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".changer").click(function(){
if ($(".slidey" + $(this).data("slidey")).hasClass("enter")) {
return false
} else {
$(".slidey").removeClass("exit");
$(".slidey.enter").addClass("exit").removeClass("enter");
$(".slidey" + $(this).data("slidey")).addClass("enter");
$(".changer").removeClass("link_change");
$(".changer" + $(this).data("slidey")).addClass("link_change");
return false;
}
});
});
</script>
The page is no longer available to be viewed.
After adding a class your should assign a "transitionend" listener like i.e:
$(".myElement").addClass("transitionClass").on("transitionend", function() {
// Transition ended.
// Do more stuff.
});
I recreated and simplified your HTML, CSS to create this example, so you might want to ignore that part, but focus on the jQ code. Should work even on your page out of the box.
$(document).ready(function(){
var $slides = $(".slidey");
$(".changer").click(function( e ){
e.preventDefault(); // Instead of return false;
var num = $(this).data("slidey");
var $target = $(".slidey"+ num);
$(".enter").not($target) // (not the already active one)
.removeClass("enter") // remove unwanted classes
.addClass("exit") // make it go to bottom
.on("transitionend", function(){ // snap it back to -100% top...
$(this).removeClass("exit"); // by removing the exit class.
});
$target.addClass("enter"); // Animate current down into view
// UL links
$(".changer").removeClass("link_change");
$(this).addClass("link_change");
});
});
*{margin:0;}
html, body{height:100%;}
body{overflow:hidden;}
#navbar{
position:absolute;
bottom:130px;
right:130px;
}
#navbar ul {list-style:none;}
.link_change{
color:fuchsia;
}
.slidey {
position:absolute;
width:50%;
height:90vh;
background:#ddd;
top:-100%;
}
.enter {
top:0;
transition: all 0.7s ease-in-out;
}
.exit {
top:100%;
transition: all 0.7s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<ul id="navlinks">
<li class="changer changer1 link_change" data-slidey="1">home</li>
<li class="changer changer2" data-slidey="2">profile</li>
<li class="changer changer3" data-slidey="3">message</li>
</ul>
</div>
<div class="slidey slidey1 enter">Content Box 1</div>
<div class="slidey slidey2">Content Box 2</div>
<div class="slidey slidey3">Content Box 3</div>
I want the images to slide when I move my cursor over the image. Let's say I will have 3 pictures.
The images will slide only if I am on the DIV.
I am pretty sure that this could be achieved with carousel but I am not sure if it is the best way.
My code
<div class="container products">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://codepen.io/anon/pen/xbbNPM
Also I want the div to be clickable when my mouse is over.
I am pretty sure that this could be achieved with carousel but I am
not sure if it is the best way.
Why not? Because of you already use Bootstrap you should use its features in the first place.
also read http://getbootstrap.com/javascript/#carousel and find out that you can use multiple carousels on the same page:
Carousels require the use of an id on the outermost container (the
.carousel) for carousel controls to function properly. When adding
multiple carousels, or when changing a carousel's id, be sure to
update the relevant controls.
Cause you want to slide the carousal on mouseover(hover) you do not need any control, each of your carousels can code like that shown below:
<div class="col-md-4">
<!-- Reveal Up Full -->
<div id="carouse1" class="carousel slide" data-ride="carousel" data-interval="false">
<div class=" carousel-inner" role="listbox">
<div class="item active image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
</div>
</div>
</div>
Notice that i'm not sure why you wrap your 3 md-4 columns in a md-12 column, you do not need a img-responsive class for your carousel's images.
After creating your HTML you should create a JavaScript trigger for the mouseover (i use mouse enter here):
<script>
$('.carousel').on('mouseenter',function(){ $( this ).carousel('next');})
</script>
Also I want the div to be clickable when my mouse is over.
As you can see in the above i have wrapped the images in a a tag. The only possible issue left will be that the .carousel-caption is not clickable and overlay the images. Use the following CSS code to make the .carousel-caption clickable:
<style>
.carousel-caption {
pointer-events: none;
}
</style>
Demo: http://www.bootply.com/bmLVbymbhj
update
The caption doesn't slide up anymore. Actually code has changed dramatically. I think I > need to integrate it to your code.
Yes, you should integrate the revealUpFull class. Let me know if you found any troubles by doing this, or formulate a new question on SO.
You should use something like that shown below:
.carousel-caption {
width: 100%;
height: 100%;
position: absolute;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
/* make image clickable */
pointer-events: none;
/* override bootstrap */
left: 0;
right: 0;
}
/* REVEAL UP FULL */
div.image.revealUpFull .carousel-caption {
height: 100%;
width: 100%;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: 0;
}
div.image.revealUpFull:hover .carousel-caption {
bottom: 0;
}
.carousel-caption {
pointer-events: none;
}
The left and right arrows which helps to slide are removed. This is what I want but
their blocks remains. So there is a space on the left and right.
I expect that the above issue is not related to the removed arrows but will be due to the size of the images. You are using image with a 360px width. As mentioned before the carousal's images are responsive by default. The CSS code sets a max-width:100% for these images, which means that they should not display larger than their original size. You can solve this by using larger images or give the image a with of 100% (mostly scaling up images will have quality issues). You can use the code that shown beneath:
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
max-width: none;
width: 100%;
}
What I want is when my mouse is over the DIV, 3 pictures will slide automatically with
infinite loop. Between each of them there will be 2 secs
In fact you should be able to use the following:
$('.carousel').on('mouseenter',function(){ $( this ).carousel('cycle',{interval:2000});});
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pauze')});});
But the carsousel already pause on mouseenter. I will post a solution for that later on.
The carousel api has a pause option (hover by default), you can set this option to an empty string to prevent the carousel stop cycling on hover.
You should remove the carousel data-attribute in your HTML to enable explicit JavaScript initialization:
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page >load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript >initialization of the same carousel.
After that you can use:
$('.carousel').on('mouseenter',function(){ $( this ).carousel({interval:2000,pause:''}); });
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pause'); });
When putting above three point together you will get something look like that show in the following demo: http://www.bootply.com/acGNORR3it
It looks like we don't need carousel for this simple feature. Javascript way will be easiest and fastest.
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/750/375/sports/1/";
path[1] = "http://lorempixel.com/750/375/sports/2/";
path[2] = "http://lorempixel.com/750/375/sports/3/";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",3000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="" width="400" />
Demo: http://codepen.io/anon/pen/emmqYJ
Let me know if any easier solution exists.