Develop Reference

Show Specific DIVs if Selected DIVs are Hidden

Fiddle - http://jsbin.com/udumibO/1/edit
If these divs are hidden (they're hidden by the .hide() event handler) then I want two other divs to show.
I tried the following on document.ready, but it's not working, and I have no idea why.
Here's the code.
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
}
Any help is greatly appreciated.

Use this:
if ($('.select-properties, .div-properties, .image-properties, .table-properties').css('display') == 'none') {
$(".starter-properties, .canvas-properties").show();
}

Try this link
It might be helpfull for you.
http://jsfiddle.net/rahulsahu/eveKU/
HTML :
<div id="first-div">first div</div>
<button id="first">hide above div</button><br/>
<button id="second">show another div when first div is hidden otherwise don't show</button>
<div id="second-div" style="display:none;">Second div</div>
JQuery :
$("button#first").click(function(){
$("#first-div").hide();
});
$("button#second").click(function(){
if($('#first-div').is(':visible')) {
// do nothing
alert("first div is not hidden");
}
else{
$("#second-div").show();
}
});

I managed to accomplish the effect I wanted using the following function.
$(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
}
});
Here's the fiddle - http://jsbin.com/udumibO/3/edit
I'm sure there's a neater way to write this, but this is the best I could do to accomplish the effect I wanted.

Ok, it looks like a lot of code here. :P
Great, so I think, you just want to create a tab system and initially you want to hide all the tab content and show something else by default.
Well, Here is something which doing same as your code, and also solving your problem.
$("span", ".nav").click(function(){
var target = $("." + $(this).attr("class").replace(/tool$/g, "properties"));
target.show().siblings().hide();
$(this).addClass("active").siblings().removeClass("active");
});
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
jsfiddle: http://jsfiddle.net/ashishanexpert/c7eJh/2/
JSFiddle code is well commented.
Let me know, if something you want to add or ask about this. Good luck!

You can use
$(".target").toggle(function () {
// your remaining action. something written here
});

Scroll to Fieldset When Link is clicked

so I have an example of what I have so far here
obvious this is not working because the PHP, let alone the jQuery.
its just to show what I am doing.
I want to be able to click on the href, and this will scroll to the fieldset with the appropriate title.
Can anyone help, seems simple but cant get it to work ?

Apply an id to each fieldset and use this code:
function scrollForMe(top){
$("html,body").animate({
scrollTop: top.offset().top
}, 1000, "easeOutExpo");
}
Use it like so:
$(".link").click(function(){
scrollForMe($("#fieldesetname1"));
return false;
});

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/

Magnify search box similar to that on Apple.com

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/

Highlight changes?

HTML:
<html>
<body>
<textarea>Original Text</textarea>
<button>Replace</button>
</body>
</html>
jQuery:
$(function() {
$('button').click(function () {
$('body').html($('body').html().replace('Original','New'));
});
});
http://jsfiddle.net/r7MgY/
Can I highlight changes somehow with a fading yellow background maybe?

As Sarfraz says, use the jQuery color plugin. Usage is the same as animate method in jQuery. The plugin overrides the animation methods for these properties: 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'.
jQuery animate method usage and info can be found here: http://api.jquery.com/animate/
Also, if you want to replace something in the HTML it's better to get the wrapper tag of the tag that contains what you want invoke the replace method on instead of search through the entire body as a string. Normally you'd use:
$('#idOfMyWrapperTag').html().replace('this', 'that')
But since you are using a textarea you can get it's value with this:
$('textarea').val().replace('this', 'that');
..fredrik

Because its a textarea, you cant inject any html directly into the content. You would have to overlay an absolute positioned element containing a red squiggle or similar - which becomes a bit of a nightmare when working out the exact location of the text.
If possible, ditch the textarea and just use an editable div or similar.

Can I highlight changes somehow with a
fading yellow background maybe?
You will have to use the jquery color plugin to fade the background color.

You might be able to workaround it with
$(function() {
$('button').click(function () {
$('body').html($('body').html().replace(/Original/g,'<span class="fade" style="opacity: 0; background-color: yellow;">New</span>'));
$('.fade').animate({
'opacity': 1
}, 1000, function(){
$(this).contents().unwrap();
});
});
});

If you don't want to include yet another plugin, you can simply use a little jQuery code to accomplish a fading overlay:
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();
Credit goes to this answer: https://stackoverflow.com/a/11589350/1145177