Can anyone explain why the click handler is not invoked consistently in this example?
http://jsfiddle.net/4QBnf/
For instance, if you click in the upper left half of the div, it does not reliably increment the counter.
If I remove the padding-top from this block it works just fine:
.click-check:active {
background-color:blue;
padding-top: 25px;
}
I have tested this in a number of different browsers and it behaves the same way.
I found two possible issues with your code. You can view the fixes here:
http://jsfiddle.net/4QBnf/6/
CSS Box Model vs jQuery Box Model
Whenever you click on the top half of your box, you aren't technically clicking on .click-check, you are actually clicking on .count. This image shows the location of .count relative to .click-check:
jQuery counts this as a click on .click-check, but CSS doesn't. The number increments, but the CSS "active" effect isn't applied.
You can resolve this by removing the .count div and placing everything inside of .click-check.
jQuery Counter
The second issue is with your jQuery code. The code currrently reads:
$('.click-check').click(function() { $('.count').html(count++); });
count isn't increased until after this line is done. This means that the first click appears to have no effect.
This line will increment count, then display it to the user:
$('.click-check').click(function() { $('.click-check').html(++count); });
I've applied both updates to your example here:
http://jsfiddle.net/4QBnf/6/
Update
An alternate way to resolve the issue is to do everything through jQuery. This synchronizes all of the appearance and logic into a single box-model interpretation.
var count=0;
$('.click-check').mousedown(function() {
$('.click-check').addClass("active");
$('.click-check').html(++count);
setTimeout(function(){
$('.click-check').removeClass("active");
}, 50);
});
http://jsfiddle.net/4QBnf/15/
Related
I have a question regarding this page of mine. The menus and submenus are toggled, and I'm using Isotope. I'd like to know if it's possisble to change the style of the link which just got clicked. Since this is all happening in one page, other solutions for this problem don't work.
I can't get this to work either, probably because I have to use multiple toggles. (+ There is the added complexity of my tv schedule page, since it's basicly an entire page inside a toggle.)
I hope someone can help me by taking a look at my source code.
Create a css class for your active style instead of the inline style you have currently on "TV Schedule" (background: teal; color: white). Call the class "active" for example.
Simply add and remove this class within your click handler you already have setup with jquery. So at 134 in your source:
$('.sort a').click(function(){
//add these 2 lines
$('.sort a').removeClass('active');
$(this).addClass('active');
//the rest of your handler
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
The first line goes through and removes it from all the a tags in that block if it exists. The next one adds it to the one that was clicked.
That's usually the way I do this sort of thing. It's independent of isotope - just using the jquery you already have in there.
I'm quite new to Selenium so that question may be silly, but i cannot resolve it...
I'm trying to make a click() with Selenium (in Java, with Eclipse and Firefox and Chrome drivers) on an element that is definitely displayed and visible on the screen, but that returns false when i apply the isDisplayed() method on it. So i get an exception telling me that the element must be visible in order to perform an action on it.
I checked all parents div (i'm not using any iframe in my page), and some of them returns true as other returns false. Here is a small example of code of what i try to do :
<div id=1><div id=2><div id=3><div id=4><img that i want to click on with selenium\></div></div></div></div>
I want to click on the img with selenium, but it sees it as not displayed.
the img is marked as not displayed
the div4 is marked as not displayed
the div3 is marked as displayed by selenium
the div2 is marked as not displayed
the div1 is marked as displayed, as all parents div
But i definitely can see the image and others elements in the same div on my screen.
Any help on that point ?
Thanks !
EDIT : I use JS to modify these properties, particularly div 3, which is not displayed and marked as not displayed at loading, but then after e few action, it became (it is and is marked as) displayed.
Edit 2 : I found out that the styles of the two divs marked as not displayed by selenium have both the style display:block; (seen in the chrome dev tools). Any ideas ?
Edit3 : based on the link given in the comments, i add the computed style of the div :
div4 : it has non zero height and width, display is set on block. It even has a min width and min height.
div3 : it has non zero height and width, display is also set on block
div2 : it has a 0 height a non zero width and a display:block; so it might be the problem.
div1 : it has a 0 height, a non sero width, no display parameters, and hidden overflow-x and y. Thought this one is marked as deisplayed by Selenium...
Any ideas ?
I managed to solve my problem with a simple trick : call the Js function that is supposed to be triggered by the click, using
JavascriptExecutor js;
if (driver instanceof JavascriptExecutor) {
js = (JavascriptExecutor) driver;
} else {
throw new Exception(" Webdriver do not manage JS");
}
js.executeScript("function()");
Another solution that could be suitable is to use a Robot to use the mouse to click on this img, if you have its coordinates of course (or if you can compute it) :
Robot robot = new Robot();
robot.mouseMove(300, 300);
robot.mousePress(InputEvent.BUTTON1_MASK);
robot.mouseRelease(InputEvent.BUTTON1_MASK);
Though i did not find a solution to the displayed/not displayed problem.
Enjoy :)
I am writing a simple jQuery page with two images shown. Clicking on one of them triggers a CSS3 transformation, which should end zooming on the image.
The page has to be viewed on iPad, thus I must use CSS3 3D Transformation in order to use the hardware acceleration and keep the transition smooth.
I wrote a simple demo script here: http://jsfiddle.net/andrearota/KAdmV/4/
E.g. here is how I zoom in, using scale factor. Please note that I use the z property trying to get the div over the closed one:
Carousel.prototype.openLeft = function (callback) {
var that = this;
if (this.leftStatus != 'open') {
this.left.transition({
z: '+=100',
scale: 2
}, function () {
that.leftStatus = 'open';
if (callback) callback();
});
} else {
if (callback) callback();
}
};
As you can see, if you clic on the left image, the image is zoomed in and goes over the right one. When you click on the right one, vice versa. But then, if you click again on the left one, you can see an issue on image stacking as the left zoomed image goes under the minimized right one.
Any hint?
It looks like you can remove the transform on the second image and it will go back behind the first one. So in other words, on image click I would probably first remove all occurrences of the transform property before applying to the clicked image.
Or you could also set both images to position:relative and then on click set the z-index to something like 5 and set all other images to something below it such as 3. But again, you'll need to clear these inline styles so that when another image is clicked there are remnants from before that give you un-clear results.
I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.
I thought I saw this a while ago, but can't remember where.
Thanks.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
Your code should be something in the lines of:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').animate({height: '20px'});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').animate({height: '100%'});
return false;
});
});
Take a look the image on my home page, is this kind of what you want to do?
http://www.carsonshold.com/
I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).
It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:
var featureDuration = 300; //time in miliseconds
$('#featured-img').hover(function() {
$(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});
}, function() {
$(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
});
If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.
Cheers
Did this rather quickly, note it will only hide the bottom portion.
http://jsfiddle.net/loktar/KEjeP/
Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.
I created a contentEditable div to use as a rich textarea. It has resize handlers around it that I'd like to get rid of. Any idea how I'd do this?
Edit: This appears to be happening because I am absolutely positioning the div, so Firefox adds an infuriating _moz_resize attribute to the element which I cannot turn off.
Just as a side note, you can disable Firefox's automatic resize handle feature by sending the (somewhat poorly-documented) enableObjectResizing command to the document:
document.execCommand("enableObjectResizing", false, false);
AFAIK, this can only safely be done once the document has loaded, and there's no way I know of to disable the grabber, which is a separate feature.
It looks like I'll be able to work around this by adding a wrapper div and absolutely positioning the wrapper and then making the inner div contentEditable.
In Chrome 39, these handles don't seem to exist, even if you wanted them to.
In Firefox, one can simply use execCommand, like ZoogieZork answered.
But in Internet Explorer this can't be turned off. It must be worked around.
In WYMeditor development, here's what I've found.
The following results in:
In IE, the resize UI shows up for a split second and then disappears. There seems to be no way for the user to use it.
Images are text selected on mouseup
Ability to drag images. In some browsers, they may have to be selected before dragging. As written in the previous item, a simple mouseup will result in an image being selected.
Images are selected using text selection and not "control selection" (that which provides the resize UI).
This is the best I could come up with after hours of very deep breaths. I think it is good enough if you really want to get rid of those handles.
In IE, Setting oncontrolselect to return false on the image, really does prevent those handles from appearing, and you can do it cleverly, by attaching the following handler to the mousedown event:
function (evt) {
var img;
function returnFalse() {
return false;
}
if (evt.tagName.toLowerCase() === "img") {
img = evt.target;
img.oncontrolselect = returnFalse;
}
}
It actually doesn't work completely well. The reason that it didn't work very well is that in order to begin a drag and drop operation on the image, one had to press and hold the mouse, without moving it, for a split second, and only then begin moving it for the drag. If one pressed the mouse and immediately began dragging, the image would remain in its place and not be dragged.
So I didn't do that.
What I did is the following. In all browsers, I used mouseup to text select the target image exclusively. In non-IE and IE11, synchronously:
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
selectSingleNode(img); // In my case, I used Rangy
}
}
In IE 7 through 10, asynchronously:
function (evt) {
if (evt.target.tagName.toLowerCase() !== "img") {
return;
}
window.setTimeout(function () {
selectSingleNode(img); // In my case, I used Rangy
}, 0);
}
This made sure that after those handles show up, they disappear ASAP, because the image loses its "control selection" because that selection is replaced with a regular text selection.
In Internet Explorer 7 through 11, I attached a handler to dragend that removes all selection:
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
deselect(); // I use Rangy for this, as well
}
}
This makes the handles that show up after drag and drop, disappear.
I hope this helps and I hope you can make it even better.
I just face that problem.
I tried document.execCommand("enableObjectResizing", false, false); but, the move icon was still appearing. What just fix my problem was just e.preventDefault() when onmousedown event occurs.
element.onmousedown = function(e){
e.preventDefault();
}
for IE11 (I havn't tested the older versions of IE, but I feel like it would work) you can add contenteditable="false" attribute to the img tag. This will prevent any re-sizing from being done while keeping drag and drop in place.
... just the best fix ever
<div contenteditable="true">
<label contenteditable="false"><input/></label>
</div>
or any html element that wraps your input/img
Works on IE11 like a charm
Have you tried adding the style
border: none;
to the div?