I have text that I need to link to where you click on it and an iframe window pops up with the content from an external site. I have found code that when I use it, a box appears above the text and the content shows in the box when clicked. But I need it to not show anything until the link is clicked.
<iframe name="book" src="https://www.timetrade.com/book/9PK2K"></iframe>
Book Now!
This is the code I used to try to get it to link to a pop up iframe window but it showed a box above the text.
You'll need to use some javascript for this.
A simple onClick() method that sets the display to 'Block' and 'None' to display and hide, respectively, should do the trick.
The javascript would set style.display="none" by default, and the onClick will be written to set style.display="block" or some un-hidden attribute.
Check out this http://www.w3schools.com/jsref/event_onclick.asp for onClick
and http://www.w3schools.com/jsref/prop_style_display.asp for using javascript to show/hide DOM objects.
Good luck!
Related
I have created few forms and one pdf preview for this, whenever anyone will going to fill that form pdf preview will get updated with respect to it and after filling all the forms we can take pdf of it.
I want to be shown the particular section is getting updating (like changing the background color or underline it) on right side
when you giving the input on particular text box.
Please find the live code at http://ibus.proserindustries.com/
Posting this answer from the comment.
$("#propertytubelight").keyup(function() {
$("#propertytubelight1").text($("#propertytubelight").val());
document.querySelector("#propertytubelight1").scrollIntoView({ behaviour: "smooth", block: "nearest", inline: "start" });
});
This uses scrollIntoView method to scroll the input field with it's linked html element
I want to make title window (pop up) in flex .. which contains some buttons if i click on any button then another button has to add outside the title window
can anyone help me out.
Thanking you
Pop ups can be achieved using the Alert class. Say for showing a pop up below code might work
Alert.show("Alert Text", "Title", Alert.OK, this, start_app);
The Alert.OK specifies the buttons to be included. You can include more by using OR operator. The labels of these button can also be changed to meet your requirements. The start_app is called the closeHandler which will be triggered if any button in the Alert is pressed. Further logic can be put in the closeHanlder. For detailed information see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/Alert.html
$('#popupDiv').popup("open");
This programmatically opens a JQueryMobile pop up, but I want to know if it is possible to change or set my popup's settings, such as data-position and data-transition along with my code above. Thanks.
You can do:
$('#popupDiv').popup("open", {positionTo: '#mydiv'});
'origin' is not working for me in version 1.2 though.
see: http://jquerymobile.com/demos/1.2.0/docs/pages/popup/methods.html
Straight from the jQuery Mobile Docs:
Positioning options By default, popups open centered vertically and
horizontally over the thing you clicked (the origin) which is good for
popups used as tooltips or menus. The framework also applies some
basic collision detection rules to ensure that the popup will appear
on-screen so the ultimate position may not always be centered over the
origin.
For situations like a dialog or lightbox where the popup should appear
centered within the window instead of over the origin, add the
data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of
position-to in addition to origin and window. For example, if you add
data-position-to="#myElement" the popup will be positioned over the
element with the id myElement.
<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="slideup">
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
You can add data-transition="slideup" (or the transition of your choice) to the link, as well as other positioning options outlined in the docs link at the top of my answer.
yeah the right way to do this is use event.target like this
$('#popup').off('taphold').on('taphold', function (e) {
$('#popupDiv').popup("open", e.target);
});
incidentally, this code then places a popup if you tap hold the button and a click event is like this would mean a normal click still works
$('#popup').on('tap', function (){
var url = $(this).attr('url');
window.open( url, '_parent');
});
nb: I added "url='google.com'" to the markup and made href='#'
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
I have the following HTML code:
<div onclick="window.open('http://example.com')" >
<p>1234 Main St, New York, NY</p>
<p>Price: $200,000/p>
<p>4 Beds / 3 Baths</p>
<p>2000 sqft</p>
More Info
</div>
If the person hovers over the part of the DIV that is not the hyperlink, it only opens one window.
If the person clicks on the hyperlink within the DIV, it opens 2 windows (one for the DIV and one for the hyperlink).
Is there any way around this 2x opening window scenario?
The simple solution:
More Info
You could make the div clickable by making the link into a block element with css
div a {
display: block;
}
That's because the click event bubbles up. It initiates when you click the anchor element, than bubbles up to the div, and executes that too.
You need to capture the click event inside the div (using a function), and then call the event's stopPropagation method to stop it from bubbling up.
More info about event bubbling here: http://www.quirksmode.org/js/events_order.html
You could use the same function in both the DIV and the A HREF, and manage the opening inside that function to call the window only once, that will work.
Edit : If you care at least a little about Search Engine Optimization you should not use that caption for the link, but more something mentionning the content of the next page like "House details" or better depending of the context/look of the page.
I came across the same issue and please don`t laugh on my silly mistake. But two tabs was opening because i am having a link and having target='_blank' and also calling a function too on the same like:
<pre>
$('#foo').on('click',function(){
// some code
window.open("https://www.google.com","_blank");
});
where also i have added the target as _blank. i removed the target attribute from the anchor and it works fine for me. Hope you are not doing same.