The script I'm looking for is a "full screen" overlayment (div) which directly onpageload slides to left:-100% and the lower div / page will be visible.
I've been searching and testing for a while now but I can't seem to find a good and easy script.
I think the script would look a bit like this:
<script type="text/javascript">
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'left':'0'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'left':'100%'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
Is there anyone who knows some panel or slide script I can use for this?
If I've understood what you were asking correctly, here is my solution -
http://jsfiddle.net/davemcmillan/zJryc/
Basically, in the javascript you first setup variables for the width and height of your container. You then set the overlay to have the width and height of your container.
Then you create the toggle function which just looks to see if the #overlay div has a class of 'closed' or not. If it has the class of 'closed', the onclick of the button will open the overlay, and if it doesn't, it will close it.
If you want the panel to open onload, you can just un-comment where I said in the Fiddle link.
Related
Here is my goal: I want to click a specific link on one page, and on the page that loads, I want to change a specific class. I am aware of the onClick function, but not sure it can be used here. Is there a way to do this?
Thank you very much.
This jquery would do what you want:
$(document).ready(function(){
var anchor = '#myanchor';
if (window.location.href.indexOf(anchor) > 0) {
//do what you want here, change classes, etc
}
});
you should place this javascript on the second page, change #myanchor for your anchor used.
Make sure to include the jquery library in the second page for this to work.
I'm having a problem with select fields in my forms.
It's a single select field, so JQuery turns it into a button which I can tap on to select the respective option. If the text that option is rather long, then the select button becomes wider than the screen, so it's only partly visible.
I checked the that gets created by JQuery to display the button and it has the CSS 'overflow: ellipse' set, so when I give said span a fixed width smaller than the screen width the option text gets truncated with '...' and everything looks fine.
Is there a way to trigger that behaviour automatically?
the 'viewport' meta-tag is set to 'width=device-width, user-scalable=no'
It maybe late, but I hope someone else can find this helpful.
If the select is wrapped in a fieldset tag, replacing it with a div can fix the problem.
I was also looking for ways to set the width of the select box, but after googling for a long time, I gave in and just shortened the text that is displayed in the select control.
<script type="text/javascript">
$('#myselect').change(function () {
var sel = $("#myselect option:selected").text().substring(0, 20);
$("#myselect option:selected").text(sel);
});
</script>
I know this isn't much helpful, but it has come to my understanding that the select box is one of the toughest to interact with, or at lest, that's what the internet is saying.
I'll throw in a "JQuery select cheat sheet" which I found helpful in my pursuit of a solution -> http://comp345.awardspace.com/select_element_cheatsheet.pdf
I have implemented a fancybox which opens and loads ajax content without any problems. But when I load new ajax content into a div in the FancyBox using jquery I need to center the FancyBox on the screen again.
function refreshContent(url) {
$("#content").fadeOut("slow", function(){
$.fancybox.showLoading();
$("#content").load(url,false, function() {
$.fancybox.hideLoading()
$("#content").fadeIn("slow");
$.fancybox.reposition();
});
})
As you can see, I have tried with the reposition() method, but with no effect. The same applies to center()
What am I missing here?
I'm using Fancybox ver 2.0.5
Maybe is a little late but in fancy 2 there is a method:
$.fancybox.reposition();
You can see the other methods here:
http://fancyapps.com/fancybox/#docs
Regards
Probably need to put you reposition call inside the complete function of the fadeIn. Otherwise it gets called before the content is visible.
I have the like and send button on the right side of my website.
When I click on either buttons, it displays a box but it extends towards the right thus giving me horizontal scroll bars.
Is there a way to have the box extend towards the left?
Many thanks guys.
I have looked at this before and it is a pain in the £%^^&! Unfortunately because the elements are in an iframe you can't use your own stylesheets to overwite the styles and move the popup left. Instead what I have done in the past is mimic the send button to the left of the like button and use the FB.UI method to show a popup centred window like so:
<script>
$(function () {
$('#sendbutton').click(function (e) {
e.preventDefault();
FB.ui({
method: 'send',
name: 'Blah blah blah',
description: 'Description',
link: 'http://www.example.com',
image: 'http://www.example.com/content/images/image.png'
});
return false;
});
});
</script>
<a id="sendbutton" href=""><img src="#(Url.Content("~/Content/Images/send.png"))" /></a>
don't forget you will need to initialise the Facebook javascript API first:
http://developers.facebook.com/docs/reference/javascript/
Is there a way to just simply 'like' without opening the box?
No. You can try to hide the box by enclosing the iframe with a div and setting the div's height to something suitable and its overflow property to hidden, but that's about it. You might want to file a feature request with Facebook.
How would I change the html of a tag like so:
$('#someId').html('<p>foo bar</p>');
while using the live() or delegate() function? Just for clarification I don't want this to happen on hover or focus or click... I just want jquery to immediately change the html inside of a certain tag.
Basically, I'm trying to change the logo in the Mojomotor's little dropdown panel and I don't want to change the logo every time I upgrade to a new version.
Any suggestions?
.live() and .delegate() don't work like this, what you're after is still done through the .livequery() plugin or simply in the document.ready if it's present on page load, like this:
$(function() {
$('#someId').html('<p>foo bar</p>');
});
Or with .livequery() if it's replaced dynamically in the page:
$('#someId').livequery(function() {
$(this).html('<p>foo bar</p>');
});
.live() and .delegate() work off of event bubbling...an element just appearing doesn't do this whereas a click or change, etc would.
Just do it when the DOM loads.
<script type="text/javascript">
$(document).ready(function() {
$('#someId').html('<p>foo bar</p>');
});
</script>