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.
Related
I have gone at a lot of informative sites in order to find answer but no luck so far. Thus now asking here.
CSS Class
.toppy {
:-webkit-full-screen {position: relative; top: -1310;}
:-moz-full-screen {position: relative; top: -1310;}
:-ms-fullscreen {position: relative; top: -1310;}
fullscreen {position: relative; top: -1310;}
}
JS Input
window.onscroll = function() {mss()};
function mss() {
var posi = document.body.scrollTop;
document.getElementById("toppy").style.top = -posi;
}
Depending on a position on a web page, this should give the value (posi). Negatived as CSS works on that way, and trying to update CSS with style(top) value (posi). However, no updating.
JS into which CSS influences
function FullScreen() { .... code .... }
CSS affects to this. If CSS has defined without class .toppy, function FullScreen works nicely opening full screen with the CSS's pre-set values (-1310) at the position downwards from the top.
But why is CSS's style property top not being updated by JS input function and therefore changing the position of the FullScreen to open at? My goal is to obtain the full screen to be opened at its current position on page. Some browsers do this automatically, some do not. Thus needing coding.
Or does one have to define a variable in css (e.g. var(--posi)) and proceed on this way but I do not have a real clue how to do that?
Many thanks for replies!
Update:
Thanks for the points. Valid ones. However, as the problem remains, I think the issue here is how to link a css to certain js being the case paricularry with this fullscreen. If I had two identical js fullscreen (expect function name), how would I define above kind of css to one js and another css to another js? As for me, it seems that css for fullscreen is (defined as above) not accepting any id or class tags, or I do not know how to link id to js? Syntaxing? Regards!
I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor
If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!
Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well
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
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.