This is frustrating! I cant get my click event handler to work. I have spent hours on trying to figure out what the issue is but failed.
Below is my template code:
<template name="ViewStats">
<div class="tileMenu" > </div>
</template>
The tileMenu has an embedded image, large enough to be clickable.
I even tried replacing the embedded image with larger images in hope to increase the clickable area, but nothing seems to make any difference.
Following is my css:
.tileMenu{
position: absolute;
left: 115px;
z-index: 2;
height: 49px;
background: url(images/tileMenu.png) no-repeat;
top: 1px;
display: block;
height: 24px;
margin-left: 1PX;
margin-top: 2px;
float: left;
width: 17px;
background-repeat: no-repeat;
background-position: right 4px top 3px;
background-size: 75% 75%;
}
And now for the event handlar which fails to fire up.
What am I doing wrong?
Template.ViewStats.events({
'click .tileMenu': function (event) {
alert("You clicked tileMenu");
}
});
Can someone kindly explain why my alert function fails to fire up?
Thanks in advance!
Your template event code is fine, it should be working.
Because of that, I think the reason your actual event isn't happening is because your click isn't registering on the div you are targeting.
This may be due to the fact that the div is positioned weirdly or under another div. Try removing all your styles and clicking the div. Also try inspect the element to see where the actual tileMenu div is on your page.
Temporarily put some content in the div as a visual test. So you know where you are clicking is the div. Example:
<div class="tileMenu" > CLICK ME CLICK ME CLICK ME </div>
I suspect once you remove the styles or locate where the div is and click it you will see your alert fire.
A div with no content is 'hard to click'. Put some content in there so you can make sure you're really clicking on the div. Try adding text and testing. Alternatively try putting the image in actual HTML instead of background
Related
I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!
The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!
I have created a editor using div with content editable true and used a placeholder created by CSS. This works fine in all browser but Firefox.
Following is the code in html and css
HTML -
<div contenteditable="true" data-placeholder="in case this div is empty"></div>
CSS -
div{
padding:5px;
margin: 1em;
border:1px solid gray;
}
div:empty:before {
content: attr(data-placeholder);
color: gray;
}
If we run above code in Firefox (I am using version 27) and click inside content editable div 2-3 times then cursor changes its position and I cannot write anything inside div. However, if we click outside div and again click inside div I get focus successfully and we can write in it. Please help how to fix this.
You need to set the :before pseudo element position to absolute, like so:
div:empty:before {
content: attr(data-placeholder);
color: gray;
position: absolute;
top: 0;
left: 0;
padding: 6px;
width: 100%;
height: 100%;
}
but once you do it introduces this caret positioning issue due to this Firefox bug. Pick your poison >:(
Can you try giving display block to the CSS of placeholder? It worked for me.
Ok, I have got a number div tags, within a section tag and on selected menu button clicks scrolls though to that selected div area.
Each div area has a translate3d css, move each div out one other the other. Then the code fires on a 'click' event to move the div tag into the browser window.
CSS code
#Area1 {
position: absolute;
top: 0px;
z-index: 10;
border-left:10px solid #FFFFFF;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
background-color: #66cc33;
-moz-transform:translate3d(100%,0%,0px) skew(16deg, 0);
-webkit-transform: translate3d(100%,0%,0px) skew(16deg, 0);
}
Area2 code would be the same, but set at 200%. This div tag is set within a div wrapper set with position relative on it.
Jquery code the moves the div
$( "#AreaOne" ).animate({left: "0%"}, 1000, 'easeInOutQuad');
$( "#AreaTwo" ).delay(100).animate({left: "0%"}, 1000, 'easeInOutQuad');
This all works fine. No problems at all. But I want to be able to swipe through these divs as well. But is does not do this on my iphone I am testing on. Now I think this is because I use an click event function? I don't really want to change the code I have made, mainly because it works fine.
Now I tried using touchwipe on the div, but that did not work, not sure if I call it in right or not :).
Just wanted to know if there was a quick a simple way of making a div scroll on touch?
Many thanks,
Glenn.
PS. Sorry if I have not explained myself well. If its not clear, please let me know and I will change my question.
Have you tried adding the web-kit specific declaration?
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* momentum scrolling, iOS Safari only*/
More depth here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
Also see the documentation for -webkit-overflow-scrolling.
I have just encountered the strangest problem I've ever come across in my humble web developing freelance career. I'm building a web application for a job application site where applicants use their webcams to answer 3 short questions. For this I use a jQuery plugin called ScriptCam which uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.
I use jQuery .show() and .hide() to show and hide buttons. One button, a replay button, doesn't show up when calling $("#replay").show(); but DOES show when I right click anywhere in the browser after calling this command and hit "Inspect Element"! I've been searching for what could cause this problem but haven't found anything... What could cause this behavior?
This is how I have defined the button:
<div onclick='replay();' id='replay' class="replay">Replay</div>
This is the button's CSS:
.replay{
float: left;
top: 150px;
left: 60px;
z-index: 100;
-webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5);
background:url('../img/button-grey.png') no-repeat 100% 100%;
background-position: center center;
color: white;
width: 140px;
text-align: center;
padding: 10px;
cursor: pointer;
font-family: Archive;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
Edit: This is CSS of the button's parent div:
.box{
margin-left: 100px;
height: 337px;
width: 300px;
float: left;
text-align: center;
}
I haven't used any delays anywhere and the button really appears only right after I click inspect element somewhere in the browser. I also cannot reproduce this problem anywhere else. Anyone got an idea what could cause this? Any help would be much appreciated, thanks in advance!
Update: It appears that only Safari on Mac is having issues.
Update 2: When moving the button out of it's parent div to directly below the body tag it works as it should! So it's probably a css conflict of the parent div?
Edit: You can see the problem live here, just hit the button "Volgende vraag" en wait for the small video to finish. After that the replay button should appear right above the video.
I've found the solution! The problem is caused by an earlier container div which has the CSS display:none. Although I change that with jQuery's .show() before the problem occurs and it's contents are visible, removing display:none in my CSS makes it work! Thanks for all the great help and suggestions!
For me I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the issue. I found it by using inspect-element.
Then after changing it the image moved up obviously so I had to change the margins to change it back to its original position.
I've been trying to figure out how to create my own custom image gallery for my portfolio website to no avail.
I have a div that holds my thumbnails for my different images. The CSS code for this div is as follows:
.gallery {
width: 900px;
height: 600px;
background-color: white;
margin: 50px;
float: left;
box-shadow: 3px 3px 20px #000000;
position: relative;
I've created another div which is #project_display that is absolutely positioned -900px to the left of the gallery div.
This div is also set to width: 900px and height: 600px;
What I'm trying to do is take the anchored link of the thumbnails (which are the larger version images of the thumbnails) and dynamically Fill this outlying div with the larger image as it animates in. It's hard to explain. Below is the code, hopefully that makes it more clear:
$('.projects').bind('click', function(event){
$('#project_display').animate({
left:'0px'
});
event.preventDefault();
var this_project = $('.projects').each(function(){
$(this).children('a[href]');
})
$('#project_display').html('<img src="'+this_project+'"/>');
})
The anchor link to the large image is not being put into the outlying div.
Can someone tell me what I'm doing wrong? because I clearly am not doing something right.
$('.projects').bind('click', function(event){
var aHref= $(this).attr("href");
$('#project_display').html('<img src="'+aHref+'"/>');
$('#project_display').animate({
left:'0px'
});
});
Try the above one. If not works Please Provide HTML also, that will increase the understanding of code. So I will help you to fix the problem.