Here is my problem:
when I click submit button on a poorly completed form, a div appears with errors and I want the additional text to appear.
My question: how to detect the appearance of this div (error) from the click?
(function($) {
$(document).ready(function() {
$("document").on('click', 'button', function() {
if ($("#errors").length) {
$("<h1>Something</h1>").insertAfter(".className");
}
});
});
)}
My code works but only after a second click(and it makes sense) but I want from the first click.
You can do it with pure CSS:
inside the error box, make an absolute positioned div.(and style
it how ever you want)
after that on the CSS syntax Select the div as a
child for the main Error box.
So automatically when error appear it means the error box has a class (and also it means your syntax will work because the dive you've created is a child for the error box.)
Related
I have a div with a checkbox inside the div:
<div class="study-box set-box">
<span class="set-box-title"><i class="icon-th-list icon-white"></i>test set</span>
<input class="study-box-checkbox" type="checkbox" />
</div>
I want the entire div to be clickable, so I can perform an onClick() event. I don't want this event to be called when the checkbox is clicked, though. I'm thinking about adding some areas to the left and bottom of the checkbox and binding the event to those areas, but this seems hackish. Thoughts?
JSFiddle with a sample box/checkbox:
http://jsfiddle.net/PTSkR/59/
Stop event propagation when the input is clicked.
$(".study-box").on("click", function () {
console.log("clicked");
});
$("input").on("click", function (e) {
e.stopPropagation();
});
http://jsfiddle.net/PTSkR/60/
A simple solution would be to create a wrapper and set that to position: relative (removing position: relative from the study box), and move the checkbox outside of the study box. It will still be positioned in the same way, but won't be affected by hovering and clicking on the study box.
When a click event happens check the target.
$(document).ready(function () {
$('div.study-box').click(function (e) {
console.log(e.target.tagName);
if(e.target.tagName == 'DIV'){
// do something
} else {
// don't
}
});
});
i don't suggest jQuery when it can be simply done by using HTML/CSS. The trick is, place the checkbox outside of that div and push it visually inside the div using CSS position property. If you want to learn about CSS Position check out the following URL.
http://www.tutorialrepublic.com/css-tutorial/css-position.php
I have a working click-able, collapsible div script:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(".toggle-content").hide();
$(this).next(".toggle-content").slideToggle(500);
});
});
It started out just like this:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(this).next(".toggle-content").slideToggle(500);
});
});
Thsi second example worked nicely, but it made it so the user could open all the divs and this made the page too tall. I added the hide() function, but now it's causing this other issue.
I would like to add functionality that when each div is clicked again, it actually closes it (hides it). Then, all divs would be closed (hidden) at this point. Currently, one div is always open (visible). I want both functions if possible...
I'm using accordion elsewhere (I know this could be used here) but I kind of need to get this going quickly so I'm not trying to implement the simpler script here. If I could just find a fix using the existing script, I'd be stoked.
EDIT
I've edited the fiddle to show the improved fix:
http://jsfiddle.net/nicorellius/gsDVS/
This should work. It will ignore hiding the content related to the clicked element and will slideToggle that div accordingly
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
var $next= $(this).next(".toggle-content");
$(".toggle-content").not($next).hide();
$next.slideToggle(500);
});
});
I'm trying to create a rather unique effect. It's actually not that complicated, what I'm trying to do is build an experimental site, which I have already done. I just can't seem to figure out how to go about doing the final step.
So this is my site I'm tinkering with http://www.dig.ital.me/sandbox/about-me/
And what I'm trying to do is collapse the left-side bar that has the text in it : "Made in blah blah blah, etc." By clicking on the : " Click this to hide this " .
And I've tried going about doing an anchor link associated with a name link and calling the display:none when that link is clicked. However, it isn't working. So I thought I would try stackoverflow, on how I could about achieving this kind of effect where it collapses, and re-opens again.
#hide-option { color:#FFF; width:500px; height:500px; padding-left:170px;}
#hide-option:hover .fixedfooter {
display:none;
cursor:pointer; }
Here's a snippet of the hide-option div id. I've exhausted a lot of routes to try and achieve this effect but I cannot seem how to figure it out. I've tried the :onClick class, and nth-child classes, but nothing seems to work.
// Store the footer as a variable, so we don't have to keep calling jQuery's selector engine
// It's slower than a tortoise stuck in a traffic jam.
var target = $('.fixedfooter');
// Every time the hide-option link is clicked
$('#hide-option a').click(function() {
// If the left position of the target is 0
if(parseInt(target.css('left')) == 0) {
// Check the target is not animated and, if it is, animate off screen
!target.is(':animated') && target.animate({left: -751}, 250);
} else {
// Assume it's hidden, and put it back to the start
!target.is(':animated') && target.animate({left: 0}, 250);
}
// Stop the link being followed
return false;
});
JQuery, the JavaScript library, will solve it all for you.
$("el").bind("onclick",function(){$("el").toggle('slow');});
If you only want CSS3 (if you don't care about IE6-8), here's something you could try: http://jsbin.com/isunoz/6/edit
I've commented it as much as possible, I hope it helps :)
What I've done is to use a checkbox input to decide if the sidebar should be shown or not.
By putting the checkbox input element right before the sidebar element (div.fixedfooter) and changing your anchor (the arrow) into a label for that checkbox, I'm able to use the :checked pseudo class and the + selector to target the sibling element (in this case, the sidebar div.fixedfooter). If the checkbox is checked, the sidebar is moved out of the screen and if it's not checked, the sidebar is shown (left: 0).
For the animation I've used some css3 transition (transition: left .4s ease) :)
I'm doing some documentation where I make heavy use of anchors for linking between pages on a wiki.
see here:
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
The feature that really makes this work well is when the browser shows the anchor at the absolute top of the pane. When it gets confusing is when linking to an anchor shows the anchor half-way down the page since the page is scrolled down all the way
see here:
http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227
My solution in the wiki (first link) was to put a blank image at the bottom of the page simply to make the browser show the anchor right at the top. Is there a better way to do this? Is there a way to do it in the second link (in which I can't add a blank image)?
Putting a blank image at the bottom of your page is a bad idea, since it will expand your document to a unnecessary height.
You could throw in some javascript to apply an effect to the anchor you just travelled to, to highlight it wherever it is.
Without altering the height of your document (i.e. adding extra padding at bottom), you'll always have this issue.
However, using bit of JS/jQuery, the user experience can be improved considerably:
On clicking a named anchor:
Instead of jumping in a flash (broswer's default behavior), add a smooth scroll
add an highlight to indicate current selection (this helps tremendously in 2nd case as the user can clearly see what is current)
Created a demo to illustrate the concepts: http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
You can create a absolutre positioned pseudo-element with a great height to targeted block using just the following CSS (for the second link in your post:
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
The height must be around the height of the viewport, so the best solution is to create these styles on the fly using js. But if you don't wan't to use js, just use height: 1000px or more — if you don't mind a gap at the bottom of course.
The best part: it's only CSS and there would be no gap when no anchors are targeted.
Edit: just a sneak peek into the future: if the vw/vh units would come to other browsers (now it's only in IE9), this could be awesomely done with just CSS using height: 100vh :)
You could use Javascript / jQuery to create a white div that has the necessary height needed to put your element at the top of the browser window, and you could even remove this upon scrolling away.
However I would highly recommend against doing so as this will expand your page where it isn't needed. It's a lot smarter to simply style the tag upon going there (through Javascript / jQuery) so it pops out to the viewer, for instance by setting the font-weight to bold or changing the background-color.
I would probably use a combination of jQuery and PHP for this:
PHP(somewhere right after your <body> element):
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
And then the jQuery:
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
Hope this helps.
I've created an example of the problem here:
http://jsfiddle.net/jXLSW/
Notice that when you hover over the image a div shows up at the top of the image. When you leave the image, it goes away. The problem is when you move your mouse over the div at the top. It goes into this show/hide cycle because the mouse is entering/leaving.
This div that shows up at the top is going to contain icons that act as a toolbar. How can I keep the toolbar visible when I hover over it? More importantly, how can I get the hover event to stop cycling?
UPDATE: The interesting thing is the following code works as desired. The problem is that there seem to be livequery issues in that often times, it doesn't actually kick in. Therefore, no div shows up, which is a major problem as well.
$('.has-menu').livequery(function() {
$(this).hover(function() {$(this).find('div.img-menu').slideToggle();}, function() {$(this).find('div.img-menu').slideToggle();});
});
Well, I changed the code to this:
$('.has-menu').live('hover', function(e) {
if (e.type == 'mouseover') {
$(this).find('div.img-menu').slideToggle();
}else{
$(this).find('div.img-menu').slideToggle();
}
});
and now all is well.