By reading this I created a popup in main document outside data-role="page" as a direct child of <body>.
then the styles are not getting affected. Once I put inside data-role="page" styles are getting affected.
You must initialize the popup yourself it is outside the page. For example, it the popup's id is 'popup-outside-page', you would need the following code on your first page:
$(function(){
$( "#popup-outside-page" ).enhanceWithin().popup();
});
Related
I have
<div class="ap-content" id="office-addon">
<div class="ap-iframe-container iframe-init" id="office-addon__5e83ed1">
<iframe id="office-addon__5e83ed1">
<!-- As it appears in the dev console: -->
#document
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="addon"></div>
</body>
</html>
</iframe>
<div>
<div>
I want to access it with nightwatch like so:
browser
.waitForElementPresent('#office-addon', 20000);
.frame('#office-addon iframe')
.waitForElementPresent('#addon', 1000)
.end();
But it times out waiting for #addon, though #addon is in the browser. How do I have to write the frame() parameters? The iframe id changes with every page build.
The solution was like following:
browser.getAttribute('#office-addon iframe', 'id', id => {
browser
.frame(id.value)
...
});
It didn't work directly.
If you want to select it by id, you probably ought to try a starts with selector like:
.frame("iframe[id^='office-addon']")
If it's always the nth iframe you can index in
// select the first iframe
.frame(0)
// go back to the original html content
.frame()
Iframes are elements to display another page, and it will not render any html written inside of it unless your browser doesn't support iframes. So that div with the id #addon is never being rendered in the first place.
I am beginner of cordova learning project and creating a sample application using eclipse. Using CSS file I am able to change image, height, width, margin and padding around it.
Now, to show Labels, Buttons and Radio button, listview how to add such UI components and where to add in index.html or css and handling a click event of button?
You could add any HTML component in the body tag.
<body>
//your code for various elements goes here.
</body>
But, if you want to add these components in real time use the innerHTML property (javascript) and allocate an event listener to that component.
HTML-
<label id="alpha1" onclick="fx()">Placeholder</label>
JS-
document.getElementById('alpha1').innerHTML="Content"
function fx (){
alert('Label Clicked');
}
Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?
I've been reading threads (specifically this one: iFrame inside Jquery accordion) and still not finding (or not understanding) how to get the Spotify playlist I have hidden in a closed accordion section to fully load on page load.
Many solutions have been offered that I've tried, so far, nothing has done the trick (probably due to my JS noobness). I'd appreciate any insight. Please do be specific about where to put what as I'm very new at Javascript.
JS:
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: false,
alwaysOpen: false,
active: true
});
});
</script>
Relevant HTML:
<h3 id="bubble">The Bubble Creatures</h3>
<section id="bubble">
<div id="bubble-story"><p>Blah blah</p></div>
<iframe id="spotify" src="https://embed.spotify.com/?uri=spotify:user:seedpodpub:playlist:4MsCt5Fkg5G99Tb5VFqzQ4" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</section>
Thank you again!
o.
UPDATED WITH MORE INFO:
Essentially, I want to do this:
If the section style is "#section1 {display:none;}" then do nothing.
If the section style is "#section1 {display:block;}" then trigger the div #spotify to load.
This should overcome the half-loading issue I'm seeing with the hidden iframe (I hope)? I'm looking at this post: Event detect when css property changed using Jquery, again, failing to implement the suggested solution.
It seems like you have found your way out of this but for others I suggested a rather easy solution for this.
I was trying to load my Google map api into an iframe which was inside the jQuery Accordion.
The problem is if you load the accordion as closed, the iframe never loads so if you try to open the accordion you wont see anything in it.
The solution is that to load the accordion as open or active first (active: '0') and then use this code to close your accordion as soon as the page gets loaded:
$("#accordion-map").accordion(
{
active: 'none'
}
);
So what happens is that when you declare your accordion its open and the above code close it right after ;) so you never see it open.
Worked for me just fine in both Chrome and FireFox.
I have an accordion control in ASP 3.5, with multiple accordion panes. For the sake of simplicity, I will only focus on one pane as the problem is pane specific. Using JQuery, I created a draggable function and applied it to my .drag CSS class. On Page_Load, I create a bunch of image objects and assign that class to them, in addition to an image. Once I load the page, I can drag all the images around as intended. What I can't do, however, is drag those images outside of the accordion panel they were created in! Is there a way around that? I tried using this, but to no avail:
<script type="text/javascript">
$(function () {
$(".drag").draggable({ containment: 'document' });
});
</script>
Is there something in the actual aspx page that I should be focusing on? I'm adding the images to a panel in my accordion pane, and it looks like this:
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header> Chassis</Header>
<Content>
<asp:Panel ID="ChassisPanel" runat="server">
</asp:Panel>
</Content>
</ajaxToolkit:AccordionPane>
I appreciate any guidance!
Have you tested this in multiple browsers? Sounds to me like an issue I had with IE. Perhaps adding a large Z-Index value to your .drag class in CSS would help.
All I had to do was add the clone helper, then anything I drag is able escape its parent container. This is how I updated my drag line and now it works:
$('.drag').draggable({ revert: true,helper: 'clone' });}
Now for the life I me I can't figure out the droppable bit :)