$('#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='#'
Related
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!
I know there a fixed position for the zoomControl, but they are not enough for where I need to put it.
Can I style it with CSS? Such as top:80px; right:20px;
Yes you can do it with jQuery. If you see the HTML source for the map generated, it can be observed that the various controls the map provides don't have a ID attribute to manipulate them. However we can use the title attribute of each element to modify them as per our need. See this solution where in a click on the map div adds a top:50px to the bar in zoom control -
**DEMO
jQuery-
$("div[title='Click to zoom']").css("top","50px");
});
Similarly you can capture other controls in the map and add css to them as per your need.
One point to note here is that you can't us the $(document).ready() to change the css on page load since the map actually takes time to load and by then the zoom bar isn't in the DOM. So I used a map click event to add the css. You can use other events to manipulate the css of the zoom control or other controls.
I am using a link to jump to the content section of the page. It works fine; however, in IE and Chrome, after the jump if I press Tab it goes back to .
link : Skip to Content
Content Location <a id="anchortext" class='hidden'>Content</a>
Any Idea?
I suspect it has to do with the tab indexes of existing html elements on the page - clicking on an anchor tag as the one you specify above will take you down to the relevant section, but then pressing tab will take you to the first available tab stop (usually a link or form input item), which could very easily be back at the top of the page.
If you refresh the page and press tab once, you'll be taken to the first tab index enabled element of the page - I'm guessing that'll probably be the same section you were being taken to in your original question...
This appears to be a matter of different handling of internal links in browsers, and seems to fall into the category of behavior not defined in specifications, hence browser-dependent.
When you have focused on a link (usually, with tabbing) and hit enter to follow the link, browsers may or may not retain the focus. You can see the difference in behavior by using a CSS rule like :focus { background: yellow; }.
If the focus is retained (which is somewhat illogical, as the focused element may well be out of sight), a tab will take you to the next focusable element on the page (“next” in the sense of tabbing order).
If focus is lost, it may be treated as giving focus to the entire page (an IE oddity), or as having no focus. Either way, hitting tab will take you to the first focusable element on the page (as per the tabbing order).
I’m afraid there’s nothing you can do on a page to change this. It’s between the user and the browser.
AFAIK there's no way of doing that using only html.
So, i made a javascript script using jquery.
When the user clicks on the jump item, i look for the next link or the next link inside a specific element and put a focus on it.
This solves my problem with Chrome (>25) and IE (>7) and of course Firefox does the excelent job of interpret the tab action correctly.
$("#jumpToMenu").on("keydown", function(e) {
var keyCode = e.keyCode || e.which;
if(keyCode == 13) {
e.preventDefault();
e.stopPropagation();
$("#myMenuToJump").find('a:first').focus();
}
}).on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$("#myMenuToJump").find('a:first').focus();
});
Hope this helps...
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.
I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.