Basically, I currently have a slide down menu that displays links when you click the header.
I want this to change to a horizontal slide but my knowledge is currently only with HTML and CSS, in other words I'm not very good at jquery/javascript.
So yeh, here's an example (Click CATEGORIES) http://newsunken.tumblr.com/
I would like it so that when you click categories the categories slide from the left to the right and display like "CATEGORIES TEES JUMPERS HEADWEAR"
Sorry for the noob question!
$('#box').click(function()
{
$(this).animate({
width: '350px'
}, 300, function() {
// Animation complete.
});
});
and
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
here's the best thing i could come up with but isnt as sleek as the one on newsunken.tumblr.com
This script slides horizontally fine, just in case I am showing the whole page. Please, pay attention to the document.ready function
<html>
<head>
<title>sliding</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#box').click(function()
{
$(this).animate({width: '350px'}, 300, function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
</body>
</html>
I'm not sure if it is what you are looking for, but try this:
$('#box').click(function()
{
$(this).animate({
height: 'toggle',
width: '350px'
}, 300, function() {
// Animation complete.
});
});
Related
I have a text area. Whenever someone will click on the text-area then the height will be increased and clicking again anywhere in the screen height will be decrease.
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').focus(function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
But the code is not working. How can i do that?
Your code is good for the focus event, and you only need to add similar code for the blur event. Try this:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').focus(function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
$('textarea#revbox').blur(function () {
$('textarea#revbox').animate({ height: 50 }, 1000);
});
</script>
Please note that you need to include jQuery at the top (preferably in the <header>).
try using mouseenter and mouseleave events:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').on("mouseenter",function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
$('textarea#revbox').on("mouseleave",function () {
$('textarea#revbox').animate({ height: 50 }, 1000);
});
</script>
I'm a newbie with jquery and I'm trying to code a very simple animation. I've already coded the div movement but I would like the animation to start automatically when entering the page without clicking or hovering anything.
So this is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("#div02").animate({left:'150px'});
});
$("p").hover(function(){
$("#div01").animate({left:'180px'});
});
});
</script>
<style>
#div02{background:url(norahalf.png) no-repeat; background- size:contain;height:100px;width:100px;position:absolute;}
#div01{background:url(rinohalf.png) no-repeat; background-size:contain;height:100px;width:100px;position:absolute; left:500px}
</style>
</head>
<body>
<p>something something dark side</p>
<div id="div02"><img src="pixeltransp.gif" width="100%" height="100%" alt="rino" title="rino"></div>
<div id="div01"><img src="pixeltransp.gif" width="100%" height="100%" alt="nora" title="nora"></div>
Any help would be greatly appreciated!
Nora
Try not having the animate function executed after hovering the paragraph, then:
$(document).ready(function(){
$("#div02").animate({left:'150px'});
$("#div01").animate({left:'180px'});
}
To start automatically you just need to trigger mouseover event on page load:
$(function() {
$("p").hover(function() {
$("#div02").animate({ left: '150px' });
$("#div01").animate({ left: '180px' });
})
.trigger('mouseover');
});
I'm not sure if you still need this p hover event at all though.
Demo: http://jsfiddle.net/rDMGC/
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
I am working with web application and I want to resize textarea with animation effect (smoothly resize) when the textarea gain focus.
I tried following code to resize textarea on focus gain but it does not smoothly resize.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type='text/javascript'>
function abc()
{
$('#txt').attr('rows',15);
}
</script>
</head>
<body>
<textarea id='txt' rows="4" onfocus='abc();' cols="50">
this is testing of textrea
</textarea>
</body>
</html>
If you dont need support for IE9 and older versions, pure CSS can solve your issue.
#txt {
height:80px;
transition: all 2s;
-webkit-transition: all 2s; /* Safari */
}
#txt:focus {
height:300px;
}
http://jsfiddle.net/MHC8T/
try this:
function abc()
{
$('#txt').animate({'height':"+=100px"}, 400);
}
you can switch the height to whatever you want.. the +=100 is relative and will add 100px to the height of the textarea
also as an external event handler
$("#txt").bind("focusin",function abc(){
$('#txt').animate({'height':"+=100px"}, 400);
});
hope that helps
Try this...
$('#txt').focus(function() {
$('#txt').animate({
width: 500,
height: 200
}, 1000);
});
$('#txt').blur(function() {
$('#txt').animate({
width: 160,
height: 48
}, 1000);
});
Example: http://jsfiddle.net/FMp4a/
For more information about the $.animate() see this page in the jQuery API documentation...
http://api.jquery.com/animate/
Try this
$('textarea.expand').focus(function ()
{
$(this).animate({ height: "4em" }, 500);
});
for more information check
"http://jsfiddle.net/Y3rMM/"
I came up with a different answer, this way it auto adjusts to the size of the amount of content in the textarea instead of a fixed height
$('#txt').focus (function() {
$(this).animate({
height: $(this)[0].scrollHeight
}, 200);
});
$('#txt').blur(function() {
$('#txt').animate({
height: 40
}, 200);
});
Example: http://jsfiddle.net/FMp4a/10/
I am trying to implement smooth div scroll, the "Clickable Logo Parade" in particular: http://www.smoothdivscroll.com/clickableLogoParade.html
And I got it working in a blank page perfectly exactly the way I want it to, but when I insert it in my current layout it doesnt work properly.. I am assuming something is interfering with it?
Any help?
This is what I added into my css:
#logoParade
{
width: 628px;
height: 75px;
position: relative;
}
#logoParade div.scrollableArea a
{
display: block;
float: left;
padding-left: 10px;
}
This is the jQuery I have added:
<script type="text/javascript">
$(document).ready(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</script>
And these documents im including:
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinectic (1.5) used for touch scrolling -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
As well as of course actual jquery..
I uploaded me trying to implement it here you can have a look:
http://www.mintystudios.co.uk/clients/naghmeh/
And here is working version in a blank page..:
http://www.mintystudios.co.uk/clients/naghmeh/1/
Anyone know why it isnt working in the implemented version?
This should solve your problem; replace it with your script.
<SCRIPT type="text/javascript">
jQuery(function ($) {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</SCRIPT>