Need a simple popup (modal, on-page-load with time-delay, fast & clean)

JavaScript
61

Yay it doesn’t show up anymore :smiley: Thanks a lot Pullo

Now it’s all up to getting the responsive slider to work :slight_smile:

I’ll put it in place in the test page and see how it goes from there

62

Ok the slider works regarding java but I don’t really feel like the style is nice. I’d prefer something page-wide like this page here: http://www.holidaystofeedyoursoul.com/

Any idea on how to accomplish that?

63

Hi Pullo, when you can please have a look here

choose the second option and it will lead you to a new page I’m trying to build with less problems than the first one you saw.

I’m trying to use flexislider which looks more like what I need but for some reason the slides are halfway out of the screen… I just put the original css and javascripts they provided on this page http://www.woothemes.com/flexslider/

64

Ok nevermind, it was the margin-top missing that was messing things up. Do you see any error in that page that I should fix?

65

For me the slider is stretched over the width of the page.
As my monitor is 24 inches wide, that makes it look a bit weird.
Maybe you want to look at fixing that?

66

Hi Pullo, awesome new forum by the way.

I think we just need to get images that are bigger in width and height to adapt them to the page.
But you are right it was a bit too wide, I reduced it to 80% of the wrapper.

Uhm I’d have only one problem now. Having a searchbox appear responsively on top of the banner similar to a website like http://www.thomascook.com/holidays/city-breaks/#intcmp=froghp_productbox1_CityBreaks

Problem is my searchbox is pulling from our CRM and it’s inside an iframe

this is its code:

67 
<script language="Javascript">
function switchframecustom(button, iframeid, url, text) {
$(button).up(1).childElements().each(function(e) { e.removeClassName('current') });
$(button).up(0).addClassName('current');
$(iframeid).contentWindow.document.body.innerHTML = '<p><span style="color:  #ffffff">Loading Search Form...</span></p>';
$(iframeid).src = url;
} 

</script>    

<div id="search" class="left_rounded_corners">

<h1 style="color:#ed9107; margin-left:10px"">Search your Holiday</h1>

<div style="margin-left:5px;padding: 0;position: relative;z-index: 1;">
<input type="radio" name="searchopt" value="FlightAndhotel" onclick="switchframecustom(this,    'searchformframe', '/tab_hotel_flight.phtml?country=[INC:getcgivalue("country")]&destair=    [INC:getcgivalue("destair")]', 'Holidays');"  checked="checked"/> Flight + Accommodation<br> 

<input type="radio" name="searchopt" value="Flight" onclick="switchframecustom(this, 'searchformframe', '/tab_flight_carhire.phtml?country=[INC:getcgivalue("country")]&destair=[INC:getcgivalue("destair")]','Flights');"/> Flight + Car hire<br>    

<input type="radio" name="searchopt" value="Hotel" onclick="switchframecustom(this, 'searchformframe', '/tab_hotel.phtml?country=[INC:getcgivalue("country")]&destair=[INC:getcgivalue("destair")]','Hotels');"/> Accommodation only<br></div>

<div id="searchformswitch">
    <div id="searchContent">
     
     <iframe src="/tab_hotel_flight.phtml?country=[INC:getcgivalue("country")]&destair=[INC:getcgivalue("destair")]" name="searchformframename" id="searchformframe" width="200" height="300" frameborder="0" border="0" scrolling="no" allowtransparency="true"></iframe>
     <div class="clear"></div>
    </div>
</div>

</div><!-- /search-->

<div class="spacer"></div>
<script src="/ssi/searchframe.js"></script>
<script>
monitoriframesize('searchformframe','tabform',1);
</script>
68

Hi,

This sounds more like a CSS issue.
It’s probably better to start a new thread in the CSS category.

69

Thanks, will do.

70

There are some javascript errors on the page, can you help me find a solution for that please?

71

Whats the address of the page, again?

72

sry it’s http://www.sntravel.co.uk/switchview.pl?list=1 newview (option2)

73

also I was told there’s a script monitoring the frame size:

<script src="/ssi/searchframe.js"></script>
 <script>
     monitoriframesize('searchformframe','tabform',1);
 </script>
74

I see the following in the console:

Uncaught TypeError: undefined is not a function searchframe.js:1
The "fb-root" div has not been created, auto-creating all.js:56
GET http://dni2_0.agcdn.com/ net::ERR_BLOCKED_BY_CLIENT gtm.js?id=GTM-K9SKH3:48
Uncaught #<Object> gtm.js?id=GTM-K9SKH3:50
Uncaught #<Object> gtm.js?id=GTM-K9SKH3:50
Uncaught ReferenceError: jQuery is not defined tab_hotel_flight.phtml?country=&destair=:28
Font from origin 'http://static1.traveltek.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.sntravel.co.uk' is therefore not allowed access. (index):1
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. ping?client_id=500072273433614&domain=www.sntravel.co.uk&origin=1&redirect_uri=http%3A%2F%2Fstatic.…:1
2Font from origin 'http://static1.traveltek.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.sntravel.co.uk' is therefore not allowed access. (index):1

Why not use the technique I demonstrated before to try and find which error belongs to which script, then we can see what can be done about them.

75

I removed the searchbox and all the errors disappear

this is the code I removed:

    <div class="sliderSearchContainer">
 <div id="search" class="searchPanelHome">

 <div style="margin-left:5px;padding: 0;position: relative;z-index: 1;">
 <input type="radio" name="searchopt" value="FlightAndhotel" onclick="switchframecustom(this, 'searchformframe', '/tab_hotel_flight.phtml?country=[INC:getcgivalue("country")]&destair=[INC:getcgivalue("destair")]', 'Holidays');"  checked="checked"/> Flight + Accommodation

 <input type="radio" name="searchopt" value="Flight" onclick="switchframecustom(this, 'searchformframe', '/tab_flight_carhire.phtml?country=[INC:getcgivalue("country")]&destair=[INC:getcgivalue("destair")]','Flights');"/> Flight + Car hire


 <input type="radio" name="searchopt" value="Hotel" onclick="switchframecustom(this, 'searchformframe', '/tab_hotel.phtml?country=[INC:getcgivalue("country")]&destair=[INC:getcgivalue("destair")]','Hotels');"/> Accommodation only</div>




     
     <iframe src="/tab_hotel_flight.phtml?country=[INC:getcgivalue("country")]&destair=[INC:getcgivalue("destair")]" name="searchformframename" id="searchformframe" frameborder="0" width="100%" height="300px" border="0" scrolling="no" allowtransparency="true"></iframe>
     <div class="clear"></div>
    </div></div>
76

So, that’s good, right?

77

Hey, no not really… I need the searchbox there :smiley:

78

Hi,

When I visit the page, I still get all of the errors I posted above.
You really need to sort those out before we can add any additional functionality.

79

Hi, I just get 1 error, jQuery is not defined, from the tab_hotel_flight.phtml block which is the searchbox. Do you see more than that?

80

This is what I see:

1061×1041 712 KB