I want to do a animation in text, hide text right to left, but the letters is mounted after animation...
I know that I can use a white-space: nowrap but I need it see as a paragraph
how I can animated this text without mounted letters?
JSfiddle Example
setTimeout(function () {
$("#title").animate({width: 'hide'});
$("#description").animate({width: 'hide'});
$("#text1").animate({width: 'hide'});
},2000);
.bold{
font-size: 48px;
color: black;
width: 400px;
}
.normal{
font-size: 48px;
color: black;
width: 400px;
}
#container{
width: 452px;
height: 625px;
}
#description{
margin-top: 40px;
margin-bottom: 50px;
}
#description,#text1{
margin-left: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" >
<div id="title" class="bold">
1231231231123
</div>
<div id="description"class="normal">asd asd as da sd asdfsdfasdfasd asd fsadf asdf asdfasdf.</div>
<div id="text1" class="bold">
aaaaaaaaaaaaaaaa aaaaaaaaaaaa
</div>
</div>
If it is possible depending on your layout, you should animate #container:
setTimeout(function () {
$("#container").animate({
width: 'hide'
});
}, 2000);
Exemple
Related
I am trying to create a similar design/approach to this:
https://help.sap.com/viewer/8092b085a68941f6aaa6708685a62b0d/4.2.8/en-US/acc57dbca1ab4a5bac2a352ce8cc52d8.html?q=Amazon
Notice that, when the sidebar << and >> icons are clicked, those sidebars slide out and the topic/content in the center expands to take the freed up space.
They're using AngularJS but I have to do this using html. I can use jquery, vanilla js, and if it makes sense I can try bootstrap (though I'm obviously not very experienced and want to stick to just html and jquery if possible).
Here is what I've come up with so far. Please excuse the awful color scheme - it's just to delineate the divs:
$("#right-sidebar-slider").click(function() {
$('#right-sidebar-content').hide('slide', {
direction: 'right'
}, 300);
$("#topic-container").animate({
width: "75%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
$("#left-sidebar-slider").click(function() {
$('#left-sidebar-content').hide('slide', {
direction: 'left'
}, 300);
$("#topic-container").animate({
width: "77%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
#left-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#left-sidebar-content {
float: left;
width: 19%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
#topic-container {
float: left;
min-width: 58%;
min-height: 600px;
padding-top: 20px;
background-color: red;
}
#right-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#right-sidebar-content {
float: left;
width: 17%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
.header {
display: flex;
align-items: center;
}
.header .logo {
background: url("logo-onlinehelp.png") no-repeat;
width: 60%;
height: 25px;
border: 1px solid green;
margin-left: 15px;
}
.header .search-input {
border: 2px solid blue;
width: 40%;
margin-left: 25px;
}
footer {
clear: left;
border-top: 1px solid #cccccc;
width: 100%;
height: 40px;
bottom: 0;
position: relative;
background-color: gray;
}
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="vertex.js"></script>
<script src="dhtml_toc.js"></script>
<script src="dhtml_search.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_vertex.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- need for slider effect -->
</head>
<body>
<div class="header" style="height: 70px; background-color: gray">
<div class="logo">
</div>
<div class="search-input">
<form action="#">
<input type="text" name="search-input" value="Search available topics..." size="70">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="left-sidebar-content">
Table of Contents...
</div>
<div id="left-sidebar-slider">
<<
</div>
<div id="topic-container">
Topic here...
</div>
<div id="right-sidebar-slider">
>>
</div>
<div id="right-sidebar-content">
Feedback form here...
</div>
<footer>
This is our footer text.
</footer>
</body>
</html>
So I have two questions:
1. In terms of overall page structure/approach - wHat is the best approach to building something like this?
What is the best approach to replicating the sliding divs? I don't need them to animate, though that would be nice. I just need the user to be able to fill the viewport with the center topic div content.
All of the actual content will come from a CMS. This single page I'm creating is just a template that the CMS (a proprietary one) will use to then insert the content, table of contents, etc. into the html.
Your approach is not far off, but I have a couple of suggestions:
CSS flexbox instead of floats to setup the three column layout. (A Complete Guide to Flexbox)
Use CSS transitions instead of javascript to add the sliding effect. (Using CSS transitions)
Let the click of a button add/remove a class to the sidebar elements, so you do not need to have presentational informasjon in your javascript
Codepen: https://codepen.io/anon/pen/XqaGEg
HTML:
<button class="sidebar-left-toggle">
<<
</button>
<button class="sidebar-right-toggle">
>>
</button>
<div class="container">
<div class="sidebar-left">sidebar-left</div>
<div class="content">content</div>
<div class="sidebar-right">sidebar-right</div>
</div>
CSS:
.container {
display: flex;
height: 200px;
transition: width 0.3s;
}
.sidebar-left,
.sidebar-right {
background: #ccc;
width: 200px;
transition: width 0.3s;
}
.sidebar-collapsed {
width: 0;
overflow: hidden;
}
.content {
background: #eee;
flex-grow: 1;
}
Javascript:
const leftToggle = document.querySelector('.sidebar-left-toggle');
const rightToggle = document.querySelector('.sidebar-right-toggle');
const leftSidebar = document.querySelector('.sidebar-left');
const rightSidebar = document.querySelector('.sidebar-right');
leftToggle.addEventListener('click', e => {
leftSidebar.classList.toggle('sidebar-collapsed');
});
rightToggle.addEventListener('click', e => {
rightSidebar.classList.toggle('sidebar-collapsed');
});
function hoverimgon(elem){
$(elem).find('.credentials-popup').slideDown(800);
}
function hoverimgoff(elem){
$(elem).find('.credentials-popup').slideUp(800);
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
SlideUp goes up although selected class has not been left. Although several elements have the same class, the second div should only appear with the mouseover element and not with all. If the second is selected with the mouse, this should not disappear, just as it is the case, you should have the possibility to select something in the credentials-popup. What is the mistake?
Use jQuery :visible Selector and have it hide when the mouse leaves the hidden message area.
function hoverimgon(elem) {
var $slide = $(elem).find('.credentials-popup');
if (!$slide.is(":visible")) { // only slide down if hidden
$slide.slideDown(800)
}
}
function hoverimgoff(elem) {
if ($(elem).is(":visible")) { // only slide up if visible
$(elem).slideUp(800);
}
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup {
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>
you are should use a proper jQuery call, and since you are using jQuery, there is no need to write JavaScript functions for such a simple job. I have made the solution for you in a JSFiddle: https://jsfiddle.net/c8dh5qbk/2/
HTML:
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something</div>
</div>
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something else</div>
</div>
JavaScript:
$(document).ready(function(){
$('.credentials-element').mouseover(function() {
if (!$(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideDown(800);
}
}).mouseout(function() {
if ($(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideUp(800);
}
});
});
CSS:
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 50px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 50px;
padding:10px 0;
text-align: center;
}
I have a HTML like this where inner is the child div and outer is the parent div.
What I have to achieve : activate that div which has mouse over it.
I have called the hover function of the jQuery and it is helping me to append and remove the active class.
The problem: when I move the cursor upto innerchild div,it is activated but slowly when I move the cursor out from inner div to the outer parent div, the outer is not activated.
I tracked the mouse movement too. https://jsfiddle.net/Simplybj/zaz1qh8e/2/ .
The result: the mouseout of outer div is not fired when the inner div is hover
$('div').hover(
function() {
$('div').removeClass('activeHover');
$(this).addClass('activeHover');
},
function() {
$(this).removeClass('activeHover');
}
);
.outer {
background-color: #aeaeae;
height: 200px;
width: 200px;
float: left;
}
.inner {
margin: 50px;
background-color: #ccc;
height: 100px;
width: 100px;
float: left;
}
.activeHover {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
</div>
</div>
If you want to achieve this, you need to listen to the mousemove event too.
Also, I added event.stopPropagation(); so when you hover or move in the .inner div, the events of the .outer will not fired.
$('div').bind({
mouseenter: eve,
mousemove: eve,
mouseout: function() {
$(this).removeClass('activeHover');
}
});
function eve(event) {
event.stopPropagation();
$('div').removeClass('activeHover');
$(this).addClass('activeHover');
}
.outer {
background-color: #aeaeae;
height: 200px;
width: 200px;
float: left;
}
.inner {
margin: 50px;
background-color: #ccc;
height: 100px;
width: 100px;
float: left;
}
.activeHover {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
</div>
</div>
I tried separate functions for mouseover and mouseleave with jquery and is working for me. Could you please try this?
$(document).ready(function(){
$('.inner').mouseenter(function(){
$(this).addClass('activeHover');
$('.outer').removeClass('activeHover');
});
$('.outer').mouseenter(function(){
$(this).addClass('activeHover');
$('.inner').removeClass('activeHover');
});
$('.inner').mouseleave(function(){
$(this).removeClass('activeHover');
$('.outer').addClass('activeHover');
});
$('.outer').mouseleave(function(){
$('.outer').removeClass('activeHover');
});
});
.outer {
background-color: #aeaeae;
height: 200px;
width: 200px;
float: left;
}
.inner {
margin: 50px;
background-color: #ccc;
height: 100px;
width: 100px;
float: left;
}
.activeHover {
background-color: green;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="outer">
<div class="inner">
</div>
</div>
<ul class="mousemovement">
</ul>
So, first #metext_hiddentext is hidden until you press #btn_more_metext and then height: 50% will be overwritten by height: auto.
jquery:
<script type="text/javascript">
$( document ).ready(function() {
$('#metext_hiddentext').hide();
$('#btn_more_metext').click(function(){
$('#me').css( "height", "auto" );
$('#metext_hiddentext').slideToggle('slow');
});
});
</script>
html:
<div id="me">
<div id="me_content">
<div id="meimg"></div>
<div class="metext">
<h1>I'm Lazor Zombie</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<div id="metext_hiddentext">
<h2>Lorem ipsum dolor sit amet.</h2>
</div>
<div id="btn_more_metext">...</div>
</div>
</div>
css:
#me {
background: #ff8400;
height: 50%;
}
#btn_more_metext {
font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
cursor: pointer;
width: 80px;
height: 35px;
line-height: 22px;
}
Give padding:0 and margin:0 or Add custom margin and padding to <h2> because they have default margins and that is causing jump behavior in your slideToggle().
h2{
margin:0;
padding:0;
}
Here is the demo having <h2> tag with custom margin and padding
I think the problem here is, that when div is animated, it has overflow:hidden;
And the h2 has some margin on it...
so try to remove margin form h2 and add it on the div that is toggeld:
here the fiddle: http://jsfiddle.net/qk8nq/
#me {
background: #ff8400;
height: 50%;
}
#metext_hiddentext {
margin:1em 0;
}
#btn_more_metext {
font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
cursor: pointer;
width: 80px;
height: 35px;
line-height: 22px;
}
h2 {
padding:0;
margin:0;
}
Sometimes this can be fixed by adding position: relative to the container (in this case the one with the class of "metext"). But I have no idea why.
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