this is what I'm working on right now
http://www.dsi-usa.com/yazaki_port/hair-by-steph/
as you can see when you click the tabs the fade in and fade outs look extremely funny. I'm wondering if anyone can take a look at the code and tell me what I'm doing wrong. I'm extremely new to Jquery and Javascript (like yesterday new) so I apologize if the code is messy. I'm wondering if 1. there was an easier way to write this and 2. if there's a way to just have the sections fade into each other/any other cool ideas anyone has.
the html structure (pulled out all of the content for space purposes)
<div id="main">
<div id="display_canvas">
</div>
<div id="nav">
<ul>
<li><a class="btn" title="contact">CONTACT</a></li>
<li><a class="btn" title="resume">RESUME</a></li>
<li><a class="btn" title="portfolio">PORTFOLIO</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="resume">
//contents here
</div>
<div id="contact">
//contents here
</div>
</div>
the css
*
{
margin:0;
padding:0;
font-family:verdana, helvetica, sans-serif;
}
#main
{
width:1200px;
margin:0 auto;
}
#display_canvas
{
height:700px;
background-color:#fefea8;
box-shadow:5px 5px 5px #888888;
-moz-box-shadow:5px 5px 5px #888888;
-webkit-box-shadow:5px 5px 5px #888888;
display:none;
}
.clear
{
clear:both;
}
#resume
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/resume_back.png");
background-position:300px 0px;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#contact
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/contact_back.png");
background-position:left;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#nav
{
margin:1em 0 0 0;
text-align:right;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
}
.btn
{
margin-right:20px;
display:block;
text-align:center;
float:right;
color:#000000;
font-size:15px;
font-weight:bold;
line-height:30px;
text-decoration:none;
cursor:pointer;
width:150px;
height:30px;
}
.over
{
background-color:#888888;
color:#ffffff;
}
.active_contact
{
background-color:#000000;
color:#00a8ff;
}
.active_resume
{
background-color:#000000;
color:#9848c2;
}
.active_portfolio
{
background-color:#000000;
color:#ffffff;
}
and finally a whole mess of javascript
$(document).ready(function(){
//handles general navigation
$(".btn").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).removeClass("over");
}
)
$(".btn").click(function(){
var btn = $(this);
var newClass = "active_" + btn.attr("title"); //set the new class
var section = $("#" + btn.attr("title"));
if ($("#curSection").length)
{
alert('there is a section');
var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
var curSection = "active"
$("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
$(".currentSection").fadeOut("slow", function(){ //fade out old section
$(".currentSection").removeClass("currentSection");
section.fadeIn("slow", function(){ //fade in new section
alert('faded in');
section.addClass("currentSection"); //designate new section
});
});
}
else
{
alert('first time');
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
section.fadeIn("slow", function(){
alert('faded in');
section.addClass("currentSection");
});
}
});
//handles resume navigation
$(".res-btn").hover(
function(){
$(this).addClass("res-over")
},
function(){
$(this).removeClass("res-over")
}
)
$(".res-btn[title=experience]").click(function(){
$("#scroller").stop().animate({top: "0px"}, 1000);
});
$(".res-btn[title=expertise]").click(function(){
$("#scroller").stop().animate({top: "-180px"}, 1000);
});
$(".res-btn[title=affiliates]").click(function(){
$("#scroller").stop().animate({top: "-360px"}, 1000);
});
});
if anyone has any ideas as to why this doesn't work let me know. I thought maybe it was having problems loading the content, but the content should be loaded already as they are on the screen already, just no display. I'm stumped, I saw a few posts similar to mine, so I followed some of their thinking. When I set the fadeIn() to like 5000 instead of "slow" The first 60% or so of the fadeIn is skipped and the section appears at say 60% opacity and then fades in the rest of the way. Not sure what I'm doing so thank you in advance.
Off the top of my head, I think the problem might be that you are initiating an alert dialogue box rather than a jquery Fancybox / Thickbox type of overlay lightbox which accommodates the speed at which the it animates to open or close. And in any case, I am unable to replicate the issue you are facing despite going directly to your link.
So rather than to try and resolve that chunk of codes you have picked out from different sources and since the content that you wish to display is an inline one, you might as well consider using Thickbox or Fancybox instead.
Alternatively, you could also kinda script your own lightbox without using the alert dialogue boxes if you like. It could look something like this:
HTML:
<!--wrapper-->
<div id="wrapper">
Box 1</li>
Box 2</li>
<!--hidden-content-->
<div class="box-1">
This is box 1. close
</div>
<div class="box-2">
This is box 2. close
</div>
</div>
<!--wrapper-->
CSS:
#wrapper{
background:#ffffff;
width:100%;
height:100%;
padding:0;
}
.box-1, .box-2{
display:none;
width:300px;
height:300px;
position:fixed;
z-index:3000;
top:30%;
left:30%;
background:#aaaaaa;
color:#ffffff;
opacity:0;
}
JQUERY:
$(document).ready(function(){
$(".toggle-1").click(function(){
$(".box-1").show(900);
$(".box-1").fadeTo(900,1);
});
$(".close-1").click(function(){
$(".box-1").hide(900);
$(".box-1").fadeTo(900,0);
});
$(".toggle-2").click(function(){
$(".box-2").show(900);
$(".box-2").fadeTo(900,1);
});
$(".close-2").click(function(){
$(".box-2").hide(900);
$(".box-2").fadeTo(900,0);
});
});
Well, of course there's still quite a bit of styling to be done in order for the content to appear nicely in the center of the screen, but I'm gonna be leaving that out as this is more of a question of how to control the speed of which the overlay appears.
In any case, if you wanna change the speed of which it appears or close, simply alter the "900" value to something else - a lower number means a faster animation speed and vice versa. If you have noticed, I'm applying the .hide() and .fadeTo() functions together. This is partly because I will try and enforce for the shown divs to be hidden after the Close button is clicked. This will prevent it from stacking on top of other content and thereby disabling any buttons, links or functions. You can try to play around with their "900" values as well. For e.g. when you press the close button, you can actually make .hide() execute slower in relation to the fadeTo() simply by assigning maybe 3000 to the former and 700 to the latter. This will give the illusion that it is fading only rather than fading and swinging, the latter of which is prominent when you utilize the .hide() or .show() function.
Hope this helps some how. =)
Related
Starting point for my question, this Codepen
I have been looking for a way to get a slide on page that would be triggered by a JS call. Looking around, the pen above seems to be what I am looking for, but instead of a JS function, the animation is triggered by a checkbox.
One of my options would be to make the button invisible and trigger the checking using jQuery like this
$("#toggle")[0].checked = !($("#toggle")[0].checked)
While this line works, I am trying to find here a more JS/jQuery animation solution, if that makes sense.
The option of hide check and trigger the checkbox will work ... other thing you can do is add -- remove a classname but you need to change the CSS.
If you want just simple Jquery you can use slideUp / Down ...
$('.container').click(function(){
$('.message').slideToggle(500)
})
* {
margin:0;
padding:0;
}
.container {
padding:50px;
}
h1 {
font-size:40px;
font-weight:bold;
color:#191919;
}
h2 {
font-weight:normal;
font-size:20px;
color:#888;
padding:5px 0;
}
.message {
background:#181818;
color:#FFF;
height: 150px;
padding: 20px;
display:none;
}
.message h1 {
color:#FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message">
<h1> hello, I'm a hidden message. You found it.</h1>
</div>
<div class="container">
<h1>Jquery Slide Down Toggle Demo</h1>
<h2> Click here to Toggle the hidden mesage.</h2>
</div>
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Could somebody help me,take a look at this website,and tell me please,what function is used for the nice transition when you click on some of the menu bars,it goes smoothly to another page without loading whitescreen.
If you know,tell me, what it is or how can i do that,or even both :D please give me answer below.Thanks a lot.
If you give a look to the Sourcecode of the Page, you'll see that all the needen Pages are already loaded in the DOM. (One Page structure I guess, or maybe as Asychronoumus loading).
However all the Pages have their own DIV container, which are linked to the Navigation Bar.
On click on each Navigation Element, make a transition of the prefered DIV's.
You can either choose the fade effect (which is using on the Page you show us), or even some other cool effects with bouncing, or even if you know how to manupulate CSS with jQuery, then your own Animation / Transition too. Here's a link to the jQuery API fadeIn and fadeOut
.
I would do it like this:
$(function(){
// Setup your Variables first
var nav = $('.navigation ul li');
var all_pages = $('.pages .page');
var active = 'active';
var target, page;
// On Click do the stuff to get some transition
nav.on('click', function(){
// Get the Target
target = $(this).attr('data-target');
page = $('.page[data-page='+target+']');
// Hide all pages here (maybe it would be a better idea to target .page.active)
all_pages.fadeOut('slow').removeClass(active);
// FadeIn the target Page
page.fadeIn('slow').addClass(active);
});
// fallback to first page when the target is not set on page load
if(!target) nav.first().trigger('click');
});
.main { position:relative; width:100%; height:100%; font-family:'Verdana'; font-size:13px; }
.navigation { border:0px solid red; width:150px; position:absolute; left:0px; top:0px; bottom:0px; }
.navigation ul { list-style:none; width:auto; margin:0px; padding:0px; }
.navigation ul li { display:block; height:30px; border:0px solid green; line-height:30px; white-space:nowrap; cursor:pointer; padding:0px 20px; }
.pages { position:absolute; left:150px; right:0px; top:0px; bottom:0px; border:0px solid blue; }
.page { position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; min-height:500px; }
.page.active { }
.page:nth-child(1),
.navigation ul li:nth-child(1) { background:lightgreen; }
.page:nth-child(2),
.navigation ul li:nth-child(2) { background:maroon; }
.page:nth-child(3),
.navigation ul li:nth-child(3) { background:wheat; }
.page:nth-child(4),
.navigation ul li:nth-child(4) { background:cyan; }
.page:nth-child(5),
.navigation ul li:nth-child(5) { background:salmon; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class='main'>
<div class='navigation'>
<ul>
<li data-target='1'>First Link</li>
<li data-target='2'>Second Page</li>
<li data-target='who'>Who I am</li>
<li data-target='location'>Location</li>
<li data-target='5'>Oter Stuff</li>
</ul>
</div>
<div class='pages'>
<div class='page' data-page='1'> Here is the first page ... </div>
<div class='page' data-page='2'> here is the seocnd one</div>
<div class='page' data-page='who'> Who I am?</div>
<div class='page' data-page='location'> Location </div>
<div class='page' data-page='5'> Oter Stuff </div>
</div>
</div>
I hope you get the Idea behind the Code to get the result you want :)
Btw, I made this quickly HTML Markup to get a Similar effect for the transitions.
You'll need to add some more Animation Stuff for the Navigation to get the "on mouse over slide the names up etc" stuff - propably easy done with :hover syntax of CSS.
Hope this helps, ps. this is my first Post, I may have some mistakes in there.
And yes, there should be a better HTML Buildup as my Snippet does for now.
regards
Gkiokan
I would like to make it so that the container around a particular post is a different color than the one adjacent to it. Basically, the the containers just need to cycle between two different colors.
Left side is how it currently looks, right is how I want it to look. Thanks!
CSS
#content {
float:left;
width:800px;
padding:25px;
top:-50px; left:45px;
background:transparent;
{block:PermalinkPage}
width:300px;
{/block:PermalinkPage}
}
.entry {
width:150px;
margin:50px;
overflow:hidden;
background:#336136;
margin-left:-12px;
margin-bottom: -10px;
padding:12px;
{block:PermalinkPage}
width:250px;
margin-left:40px;
{/block:PermalinkPage}
}
.entry:nth-child(odd) {
background: #000;
}
HTML
<div id="content">
{block:Posts}
<div class="entry">
{miscellaneous_blocks_here}
</div>
{/block:Posts}
</div>
Why not use CSS3 selectors and forgo the javascript dance?
.entry:nth-child(odd) {
background: #000;
}
.entry:nth-child(even) {
background: #ff003d
}
Browser support: http://caniuse.com/css-sel3
A good idea would be to use classes and ids. For each class that you want this feature you can increment your id by one:
$('.your_class_for_each_item').each(function(){
i++;
var newID='your_id'+i;
$(this).attr('id',newID);
$(this).val(i);
});
This will result in newID1, newID2 etc. Then for odd ids use a color and for even ids another color. You use a function like this:
function(){
if(i%2==0){ //check if the number is odd
var z = document.getElementById('newID');
z.setAttribute('style','background:color_for_even_numbers');
}
else{
z.setAttribute('style','background:color_for_odd_numbers');
}
}
I have been working with a script by Scripterlative called CursorDivScroll, which scrolls the content of a div based on the cursor position. In my case, I want to scroll content vertically from the right side of the div; not a continuous scroll, but movement that goes a little and then stops so the user has some control. I'm having problems getting the script to work and wondered if anyone knew of a better solution? The script I have uses cursordivscroll.js and this script, which is placed just beneath my div.
<script type='text/javascript' >
$(document).ready(function() {
CursorDivScroll( 'repertoiredetails', 40, 10 ).noHorizontal();
});
</script>
Thanks for any help in advance.
<div id="repertoiredetails">
<p>content</p>
</div><!-- close repertoiredetails-->
#repertoiredetails {
background-color:#000;
width:400px;
opacity:0.7; filter:alpha(opacity=70);
margin-top:140px;
float:left;
height:auto;
display:none;
margin-left:-2px;
padding-top:5px;
border-radius:5px;
-moz-border-radius:5px; /* Firefox 3.6 and earlier */
z-index:999;
}
#repertoiredetails {
cursor: url(../images/arrow.png), auto;
position:relative;
}
#repertoiredetails p {
text-align:justify;
text-justify:inter-word;
color:#999;
font-family:'Arial Narrow', Arial, sans-serif;
font-size:13px;
width:400px;
padding:20px;
}
Don't know why the noHorizontal() is not working, but with a few changes in your CSS you can make it work.
a Fiddle example: http://jsfiddle.net/M4AXB/1/
Good Luck!