I have a applet and i want to catch when users do click inside, like a "onclick", this is my code (i´m working in FIREFOX):
<div class="col-sm-6" id="weight-display">
<div class="row the-box btn-info shadow" style="z-index:1;" >
<applet width="440" height="115" id="myApplet" MAYSCRIPT
archive="/applet/CWDisplayApplet-0.0.1-SNAPSHOT.jar"
code="com.dibal.cw.applet.CWDisplayApplet.class" >
<param name="permissions" value="all-permissions" />
</applet>
</div>
I put onclick inside divs but it don´t works.
I make a transparent div over applet but i´m working in FIREFOX, and it doesn't work, this is the transparent div:
<div class="pulsarapplet" style="background: white; position: absolute; top: 90px; left: 518px; width: 450px;height:115px;z-index:500001 " onclick="alert('BARRUAN')">
</div>
when I quit the color and convert this div in transparent... doesn't work.
I need help. Remember I using FIREFOX.
Related
Hope this topic doesn't exist twice. I'm searching for a week now and didn't find anything that helped me out.
Ok. I just made a new website with "jimdo" and I'm quite happy with what I've managed so far. My new website is almost done but I have a huge problem to hide a play button on click and show a pause button then. Then click the pause button and the play button appears. I'm sure there are a lot of codes out there but I can't find anything that works for me :(
Here is an image of how it looks at the moment:
play-pause button parallel
These two image buttons are connected to a SoundCloud iframe player and it works but it would be just awesome to have one button instead of the two side by side.
The code looks like this:
<div style="position: relative;">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 1px;" name="playSound2"><img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 22px;" name="stopSound2">
$(function(){
var widget1 = SC.Widget("so2");
$("#playSound2").click(function() {
widget1.play();
});
$("#stopSound2").click(function() {
widget1.pause();
});
});
I really dont know how to make this work.
If you are able to adjust the CSS you can implement jQuery's .addClass() and .removeClass.
Here's a working example where the play and pause buttons are placed on top of each other. A click event registered and when fired, the button with the .hide class is assigned to the toShow variable. Then, the hide class is added and removed depending on which button is shown. As you clarified in the comments that it's a requirement to have the code work while there are several buttons on the page, here's a working example.
Make sure the buttons are within the button-wrapper class as the code uses this to find the button that is currently hidden.
$('.opa').click(function(e) {
var toShow = $(e.target).parent().find('.opa.hide')[0];
$(e.target).addClass('hide');
$(toShow).removeClass('hide');
});
.button-wrapper {
position: relative;
height: 50px;
}
.opa {
position: absolute;
width: 100%;
max-width: 20px;
filter: invert(100%);
cursor: pointer;
margin: -0px 1px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-wrapper">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
<img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">
</div>
<div class="button-wrapper">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
<img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">
</div>
<div class="button-wrapper">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
<img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">
</div>
I have some reveal slideshow that I need to convert to a single page html. I've used jQuery to strip the code of all the reveal.js added classes, javascript, and stylesheets. For some reason, when I resize the page, a style is added to the div that hides half the content.
My code before resizing:
<div id="body">
<div id="slides-body">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
My code after resizing:
<div id="body">
<div id="slides-body" style="width: 960px; height: 770px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.920625);">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
Why is this happening? How can I fix it?
That is not the default behavior, there must be a window resize event as pointed by #Bas Van Stein delegated in the code causing that.
To fix, it you can just remove the attr "style" from the target div.
<script>
$().ready(function(){
$( window ).resize(function() {
$("#slides-body").removeAttr("style");
});
});
</script>
Example : http://jsfiddle.net/mzg2zk48/2/
I am developing a web game. Now i need to display a webpage, in a dialog, within my game stage.
And i know a solution, using jqueryui:
<div id="swf"></div> <!-- this will be replaced by game flash object -->
<div id="myDialog">
<iframe id="myFrame"></iframe>
</div>
<script>
$("#myDialog").dialog({
open: function(ev, ui){
$("#myFrame").attr("src", "http://xxx");
}
});
</script>
This solution need me to set "wmode" of flash object to be "opaque".
But for performance, i need to use "wmode=direct", and if i use "wmode=direct", the jquery dialog has some ploblem: titlebar is hided behind flash object, so that, i cannot drag(move) the dialog or close the dialog.
Are there other solution, without changing "wmode"? I've seen a solution, but i don't know how to do it. here are some code generated by that solution:
<iframe class="dialog_mask" frameborder="no" scrolling="no" src="about:blank" style="visibility: visible; left: 331px; top: 88px; width: 702px; height: 481px;"></iframe>
<div class="dialog_wrap" style="visibility: visible; left: 331px; top: 88px; width: 700px; z-index: 5007;">
<div class="dialog_header" style="cursor: move;">
<h3>the title</h3>
<button title="close"></button>
</div>
<div class="dialog_content" style="height: 450px;">
<iframe class="dialog_frame" frameborder="no" scrolling="no" src="http://xxx" style="width: 700px; height: 450px;"></iframe>
</div>
</div>
<object type="application/x-shockwave-flash" ...><param name="wmode" value="window"></object>
give the #myDialog div a height and width greater than your flash SWF.
i am adding divs dynamically at the bottom of screen. My problem is i want to add a div to left side of 1st div as used in facebook chatting.
I have created a jsfiddle example for more clarification
http://jsfiddle.net/Jsu4t/
<div id="ctrId1" class="draggable chatRoom " rel="0" style="float: right; bottom: 0; position:fixed; right: 0px; z-index: 1000; padding: 5px; background-color:whitesmoke;">
<div class="header" style="background-color:#006dcc">
<div style="float:right;">
<img id="imgDelete" class="imgClose" data-control="ctrId1" style="cursor:pointer;" src="Images/x_icon_hover.png"/></div>
<span class="selText" rel="0">rashmi</span></div>
<div id="divMessage" class="messageArea"></div>
<div class="buttonBar" style="padding-top:10px;bottom:0px,position:absolute;"><input id="txtPrivateMessage" class="msgText" type="text" />
<input id="btnSendMessage" class="submitButton button" type="button" value="Send" /></div></div>
In my code i am appending all the dynamic divs to a parent div, but still same issue.
you can append multiple DIVs to first DIV, there are two way to keep all div in a single line starting from left.
You can use "display:inline" Or you can use "float:left" in DIV style.
This one works as expected I hope
jsfiddle.net/U2QDD/
so I am totally new to jQuery and just tinkering at the moment, I am using a test script at the moment (below) what I want to achieve is to have images where when its clicked a div slides down with more info - similar to the new google images effect.
The problem with the script below is that it loads with the div open (I need it to open on click) and also, this will only work on one div, do I need to do the script multiple times for multiple divs?
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#clickme').click(function() {
$('#me').animate({
height: 'toggle'
}, 500
);
});
});
</script>
<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img id="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
First of all, you cannot use the same ID for multiple elements. Instead, use a class. jQuery will only select the first occurrence of an ID and will ignore the rest.
Secondly, you will need to provide the function some context - i.e., $(this).next()- This is because when you have multiple elements with the clickme class, the browser will know that it will have to select the next occurring element with a class of me, instead of any other .me element.
$(document).ready(function() {
// Hide image onload
$('.me').hide();
// Provide context for each click event
$('.clickme').click(function() {
$(this).next('.me').animate({
height: 'toggle'
}, 500
);
});
});
HTML:
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
To start off with the div hidden, you can set it to display: none, either using inline styles or (preferably) a <style> element or CSS file.
Then you can uses classes and relative positioning to achieve what you're trying to do:
<script>
$(document).ready(function() {
$('img.clickable').click(function() {
$(this).prev('.image-info').first().animate({
height: 'toggle'
}, 500
);
});
});
</script>
<div style="background-color: #333333; color: #FFFFFF;
padding: 10px; width: 200px; cursor:pointer; display:none;"
class="image-info">
Info about the image you clicked
</div>
<img src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png"
alt="It's me....ah!!!" title="Allen Liu" width="100" height="77"
class="alignnone size-full wp-image-552 clickable" style="border: none;" />
Do what the above commenter suggested, and change your image to a class based approach.
Secondly, add this to the beginning of your document.ready block
$('.me').hide();
Fiddle here