Search jQuery

jQuery Forum

Overlay panels popup on each page

in jQuery Mobile • 6 months ago

Hello,

I'm trying to implement an overlay panel popup for menu navigation on each page of my application. But I can't succeed on this implementation.

Do you have a best practice to share ?

Regards

Replies(4)

haga0054

Re: Overlay panels popup on each page

6 months ago

There is hardy any information for us... Why can't you succeed? What's happening? Give us more information so we can help you... The only best practice I can recommend is to use classes for the styling of the panels instead of what they use which is ID's.

ladenise

Re: Overlay panels popup on each page

6 months ago

I have a homepage with :

<div data-role="page" data-theme="a" data-title="sbubble" id="homepage">
...
<div data-role="content">
<div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
...
</div>
</div>
</div>

and another page with :

<div data-role="page" data-theme="a" data-title="sbubble" id="anotherPage">
...
<div data-role="content">
<div data-role="popup" id="anotherPage-popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
...
</div>
</div>
</div>

In my javascript file I have :

$( document ).delegate("#homepage", "pageinit", function() {
$( "#popupPanel" ).bind({
popupbeforeposition: function() {
var h = $( window ).height();
$( "#popupPanel" ).css( "height", h );
}
});
});
$( document ).delegate("#anotherPage", "pageinit", function() {
$( "#anotherPage-popupPanel" ).bind({
popupbeforeposition: function() {
var h = $( window ).height();
$( "#anotherPage-popupPanel" ).css( "height", h );
}
});
});

An finally in my style.css file :

#popupPanel-popup, #anotherPage-popupPanel-popup {
right: 0 !important;
left: auto !important;
}
#popupPanel, #anotherPage-popupPanel {
width: 200px;
border: 1px solid #000;
border-right: none;
background: rgba(0,0,0,.5);
margin: -1px 0;
}
#popupPanel .ui-btn, #anotherPage-popupPanel .ui-btn {
margin: 2em 15px;
}

If i load the homepage, the overlay panel appears. Then if I clic on a link with ajax dom jquery mobile insertion, the overlay panel #anotherPage-popupPanel doesn't appear.

I don't know if I had to make a popup for each page.

watusiware

Re: Overlay panels popup on each page

6 months ago

I have no idea what this means:

Then if I clic on a link with ajax dom jquery mobile insertion, the overlay panel #anotherPage-popupPanel doesn't appear.

What link? I don't see any link above.

According to the fragments you have posted, you should get a popup when you open each page.

It's more useful to post complete examples, rather than fragments.

ladenise

Re: Overlay panels popup on each page

6 months ago

Sorry for my poor english...

On my homepage, if I click on the anotherPage link, I get the page inserted into my DOM.

So I have 2 divs with data-role="page" in my DOM. And now the overlay panel #anotherPage-popupPanel doesn't appear.

But If I load the anotherPage by entering its URL in my browser (so, without the ajax DOM insertion), the overlay works fine.

I hope I'm understandable.

Top Reply

Response title

Attachments

jQuery Forum

Overlay panels popup on each page

Replies(4)

Re: Overlay panels popup on each page

Re: Overlay panels popup on each page

Re: Overlay panels popup on each page

Re: Overlay panels popup on each page

Statistics

Tags

Actions

Related Posts