Changing CSS using Javascript Function (condensing code) - javascript

I am still new to javascript (not to mention a designer, certainly not developer) so bear with me.
I wanted to use some random numbers in my CSS, and the only way I could find that fit the bill was to incorporate some Javascript to generate the random numbers and then modify the CSS. The idea is to get some slides to animate into view, rotate on hover, and animate away when clicking on another category.
I've managed to get it working in my document, both on load and called from buttons on click, but the only way I can get it to work is if I write out the full code for each instance. Each time it is the same, so when I need to change something, say a transition time, I have to do it over and over in multiple locations. It works for now but is certainly not ideal.
I wont put the full code in here (because it's absurdly long), but here's an example. I have this:
$(function() {
$("#printLink").click(function() {
$(".print").each(function() {
$(this).css({
"left":(Math.floor(Math.random()*10)-5),
"bottom":(Math.floor(Math.random()*10)-5),
});
});
$(".web, .motion").each(funtion() {
$(this).css({
"left":(Math.floor(Math.random()*200)-100) + '%',
"bottom":(Math.floor(Math.random()*500)+500),
});
});
});
});
Okay, so there's a button #printLink and separate groups of slides with classes .print, .web, and .motion (in the demo link below there are no slides in the motion section). The idea is that when I click on #printLink that the .print slides will move into view and the .web and .motion slides with move off screen. Like I said, I already have all of this working, but I have to specify all of the CSS again and again.
What I'd like to have is something like:
function moveIn(){
$(this).css({
"left":(Math.floor(Math.random()*10)-5),
"bottom":(Math.floor(Math.random()*10)-5),
});
}
function moveOut(){
$(this).css({
"left":(Math.floor(Math.random()*200)-100) + '%',
"bottom":(Math.floor(Math.random()*500)+500),
});
}
$(function() {
$("#printLink").click(function() {
$(".print").each(function() {
moveIn();
});
$(".web, .motion").each(function() {
moveOut();
});
});
});
This way I can just reference the same string of CSS each time, and minimize the chance for mismatched code.
Here's a reference link to give you a better idea of what I'm talking about.

Also, what's wrong with:
$(function() {
$("#printLink").click(function() {
$(".print").each(moveIn);
$(".web, .motion").each(moveOut);
});
});
the two functions you defined should work perfectly.

If you want to embrace CSS3, and didn't have the need for random numbers, you could handle this with a few classes in your CSS...
.print, .web {
display: absolute;
top: 500px; left: -1000px;
opacity: 0.0;
-webkit-transition: all 0.5s ease-in-out;
}
.printOn, .webOn {
top: 0px; left: 0px;
opacity: 1.0;
}
Then your links can just toggle these classes...
$(function() {
var $print = $('.print'), $web = $('.web');
$("#printLink").click(function(e) {
$print.addClass('printOn');
$web.removeClass('webOn');
e.preventDefault();
});
$("#webLink").click(function(e) {
$web.addClass('webOn');
$print.removeClass('printOn');
e.preventDefault();
});
});
Note: The "transition" property is not very well supported as of this writing. But even in a browser that doesn't support it, the links should be shown and hidden - just without any animation.

Related

jQuery .scroll .animate for multiple elements

I have two divs that I'm trying to keep on the page. I don't want them to move. Both have a unique id: search_box and menuButton. I tried implementing the following code and it worked for the part with the search_box id:
$(document).scroll(function() {
$("#search_box")
.stop()
.animate({
"marginTop": ($(window).scrollTop() + 5) + "px"
}, 0);
However when I tried to do it for the second div, it didn't work. I tried to create a class called test and to add the class to both divs and it didn't work. I tried $("#search_box" "#menuButton"). Since I'm very knew to js, at this point I'm not sure how to proceed.
You can do this with css
#search_box, #menuButton {
position: fixed;
top: 5px;
}
Another thing, this is way to use multiple jquery selector
$("#search_box, #menuButton")
Try this
$("#search_box", "#menuButton")
use comma as a separator.

Change the width of a div when clicked

I have no idea what goes wrong with my code but it gives me errors every time I click the blue Chat Here button. The button's supposed to be shorter when the iframe is hidden then when the iframe slides up, the blue button should take up the whole space the same as the iframe as well.
View Demo
Here's the JS I have so far
function showChat() {
jQuery("#blk-collaboration .chatbox").slideToggle("slow",function(){
jQuery("#blk-collaboration #toggle").css("background","#45A1F1");
});
jQuery('#btn-chat').click(function() {
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
}
$(document).ready(function(){
$('.chatbox').hide();
});
I'd greatly appreciate if you could provide me a demo as well. Been working on this code for two days now and I haven't found the right solution yet.
First of all, you forget to put ; on your height property. Another important thing is that you need to change your class position like this:
.button {
background: #45A1F1;
height: 40px;
width: 620px; /*Width of regular button */
}
.wide {
background: #45A1F1;
height: 40px;
width: 300px; !important; /* Width of wide button */
}
You can simplify your code by using this jQuery:
$(document).ready(function(){
$('.chatbox').hide();
$('#btn-chat').click(function() {
$("#blk-collaboration .chatbox").slideToggle("slow",function(){
$("#blk-collaboration #toggle").css("background","#45A1F1");
});
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
});
Check out this Fiddle..

changing element.style on the finishing position of a jQuery animated div

I am using a photo album jQuery plugin (Supersized). It includes a thumbnail tray which slides up from the bottom of the screen at the touch of a button, resulting in the following HTML being created onto the div properties and in firebug css 'element.style. property:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 0px;"
I am trying to place a footer div at the bottom of the page though, so want to move the finishing position to 'bottom:0px'. I have seen that an extra element.style can be added to local CSS but without a 'before' and 'after' type of selection I don't understand if that can help me. Furthermore I don't find the function in the JS files and from what I understand it can't be accessed anyway. I need to change these to be:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 42px;"
Any advice would be most welcome. Thanks
$('#clickedElement').on('click', function() {
$('#element').css('bottom', '42px')
});
If i didn't missunderstand you?
Probably the function which you can not find is jquery .css() function you can read how it works here.
Also if you want to animate some dive you can use jquery .animate() function (docs).
In your case it should looks like:
$('#button').click(function() {
$('#element').animate({
$('#element').css('bottom', '42px');
}, 5000, function() {
});
});
Where 5000 it's time of your animation in miliseconds.

html zoom on mouse over

I want to have a photo in a site, and when I mouse over, I want a little magnifier zoom effect.
Can I do this in html with canvas or something? javascript maybe?
thank you
Enclose your photo in a div and add Zoom via CSS on hover. You may want to increase the z-index upon hover. You can add to the below CSS to make the zoomed photo look/style better. If you don't want to reinvent the wheel, look out for some Jquery plugin which may accomplish the same thing in an elegant manner with less effort.
CSS:
#div-1 {
position: absolute;
}
#div-1.hover {
position: absolute; zoom: 70%; border: solid 1px; z-index:10;
}
Jquery/Javascript:
<script type = "text/javascript">
$(document).ready(function() {
$(".div-1").onmouseover(function() {
toggle_visibility('div-1');
})
function toggle_visibility(id) {
var e = document.getElementById(id);
if ($(e).hasClass("hover")) {
$(e).removeClass("hover");
} else {
$($(e)).addClass("hover");
$($(e)).attr({
width: "100%",
height: "100%"
});
}
}}); < /script>
Canvas isn't supported by IE without third-party plug-ins. You'll want to do this in JavaScript. jQuery makes this very easy and clean. Bind handlers for the hover in / out events for the image element you want to zoom using .hover(). "Binding handlers" simply means you pass two functions to .hover() which will be executed when the user hovers in and out, respectively. These functions will use animate(), which you can simply pass a new size.
Have a look at the documentation for .animate() and .hover(). If you're totally new to jQuery, check out the tutorials.
You can show the image in a div as a background-image and change the position with a little javascript.
Here's a library with some examples: http://www.mind-projects.it/projects/jqzoom/demos.php

How can I make a Twitter style alert stick to the top of the window?

There is an excellent code example on how to make nice jQuery Twitter style alerts here:
http://blog.codecrate.com/2009/10/twitter-style-alerts-in-rails.html
$(function () {
var alert = $('.alert');
if (alert.length > 0) {
alert.show().animate({height: alert.outerHeight()}, 200);
window.setTimeout(function() {
alert.slideUp();
}, 3000);
}
});
However, one thing that the code doesn't include is functions to stick the alert div to the top of the window, no matter how far down the page the user has scrolled.
I have found a few examples but nothing seems to play nice with this existing code.
Any ideas?
You can use the CSS style : position: fixed though I think IE has some issues with that (no surprise there..).
Use position: fixed as well as top: 0px. That will keep the div at the top of the page, always. If you want it to the right or left, then add right: 0px or left: 0px to the div.

Categories

Resources