Magnify search box similar to that on Apple.com - javascript

If you go to http://apple.com and click in the search box, you'll notice it grows/magnifies onfocus, and onblur it collapses back to it's original state.
I'm wondering if there's a jquery plugin or similar to do this job easily.
I don't want to use the JS that's on the Apple website since it's not fully cross browser. I also don't have time to roll my own. If there's nothing prebuilt, that's ok, but if anyone knows of anything pre-made, I'd be very grateful.

search box like at apple.com without JS:
http://www.kvadracom.com/en-projects-blog.html#1

It's been there a while, here's another SO post:
Mimic apple.com globalsearch input field with HTML and CSS

I guess you want something like this.It is working in IE,firfox,chrome.I didnt check for others
$('input').focus(function() {
$(this).css({'width': '50px'});
});
$('input').blur(function() {
$(this).css({'width': '100px'});
});
Similarly you could use background-color property to toggle between color
----- Edit by OP ---
I marked this as answer, however I did modify it to be a lot more like the Apple website.
$('input').focus(function() {
$(this).animate({width: 150}, 'slow');
});
$('input').blur(function() {
$(this).animate({width: 100}, 'slow');
});

Look at this article I think it can help you to certain extent.....the search box doesn't get focus when clicked but it's size is increased......http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/

Related

Slide up div on click

I want to create an effect similar to the bbc website where the user will click on the title and then a snippet of content will pop up: http://www.bbc.co.uk/
i have looked all over the place and found this snippet
$('.grabPromo').click(function(e){
$('.slideUp').slideToggle();
});
JSFIDDLE
I cannot get it to the opposite though? i want the text to slideup rather then down. Any help would be appreciated. if someone can point me in the right direction either using css or Jquery i would be grateful.
I am using it for the captions on the Slick Carousel in case that helps at all.
What i want before Click:
What i want it to do on Click:
You can use the callback:
$('.grabPromo').click(function(e){
$('.slideUp').slideDown(300 , function() {
$(this).slideUp(300);
});
});
See the fiddle:
http://jsfiddle.net/Sd8rh/858/
In this fiddle you have an example with delay.
Good luck
You can use jquery UI library
$('.grabPromo').click(function(e){
$('.slideUp').toggle("slide", { direction: 'up' });
});
For more information
https://jqueryui.com/effect/

Manually Advancing Orbit Slider

I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?
Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');
The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.
I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.
I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});

Ajax Load in jquery when hit a link from the menu

I'm new to Jquery and Ajax and have tried to solve a problem for over 1h now.
You can see the page here: http://smartcreations.se/test/test.html (If you click in the green area it have the effect I want it to have.)
Almost everything works as I want except i can't use the menu at the top to have the boxes to aminate and load the content as it does when you click on the green div.
So what I want from you guys is some input on how I can solve this, another point of view.
$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
});
This is the closest I get, but the links not works at all.
You can just fake the click on the box by using e. g.
$("#box1").click();
but I would do it completely different:
About me!
Portraits
Weddings
Action
<script type='text/javascript'>
$(document).load(function(){
$("a.show").on("click", function(e){
e.preventDefault();
var click=$(this);
var link=click.attr("href")+"#box";
$("#box").after("<div id='box2' />").load(link, function(){
$(this).animate({
// your effect and stuff
});
// Rename the new box and throw out the old one
// Make sure, it is not visible
$("#box").remove();
$("#box2").attr("id","box");
});
});
});
</script>
The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.
(The code is untested and the quick and dirty way just to give you an idea.)

jQuery or JS to show larger image

I'm looking for a way too display images like google does. when someone hovers over an image, an larger view is shown I would like to know how I can achieve this.
Something like this?
http://jsfiddle.net/roXon/HmTrw/
There are tons of plugins out there if you still aren't very good at jQuery yet. The imgPreview plugin seems like it would fit your needs. Another really slick looking one is ZoomerGallery.
On the other hand, if you want to do it exactly like Google, just go to the page where it does what you want, view source, and grab the script they are using.
$("img").hover(
function () {
//mouse enter
//do animations
},
function () {
//mouse leave
//do animations
}
);
Thats what i'd look at. Also see here:
http://api.jquery.com/hover/

jQuery Toggle Problem

What I'm trying to accomplish seems quite simple however, I'm not great at jQuery.
I did try to get as close as possible to a solution but whenever I click on the anchor tag twice, everything disappears. Obviously I'm doing something wrong.
I would like .slider1 to be visible by default and .slider2 to be hidden.
Also, when the anchor "Fader" is clicked, .slider1 is hidden.
http://jsfiddle.net/GQJxv/
Help anyone?
I have fixed up the code for you:
http://jsfiddle.net/ZAPwD/
Something like this?
$(".slider1").fadeIn("fast");
$("a.slider").click(function() {
$(".slider2").fadeOut("fast", function(){
$(".slider1").fadeIn("fast");
});
});
$("a.fader").click(function() {
$(".slider1").fadeOut("fast", function(){
$(".slider2").fadeIn("fast");
});
});
This looks like it cross fades pretty nicely:
http://martin-fleming.co.uk/examples/jquery-crossfade/

Categories

Resources