Leelium
September 10, 2014, 9:04am
1
Hi everyone, I have a website that I’m trying to render responsive.
I’m trying to place a searchbox on top of the slider banners similar to a website like http://www.thomascook.com/holidays/city-breaks/#intcmp=froghp_productbox1_CityBreaks2
Problem is my searchbox is pulling from our CRM and it’s inside an iframe
My page is http://www.sntravel.co.uk/switchview.pl?list=1 (second option navnew)
This is a test homepage that I can modify as I like.
Some context: the website is organized in blocks so you may see some code like [INC:getblock(“block_name”)] which is pulling another html block
this is its code for the searchbox.
<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>
molona
September 10, 2014, 10:31am
2
I’m not 100% sure of what you’re asking because you’re showing the Javascript but you’re posting in CSS.
I will say that there’s no way that you can have a responsive design when you have iframes with widht and height specified in the HTML. The more specific a style is, the more weight it has and therefore that’s what gets applied.
There’s nothing more specific that inline styles.
Leelium
September 10, 2014, 11:15am
3
Thanks molona for your reply.
Yes I am removing the inline style and using media queries for different screen sizes but the problem I’m finding is style the searchbox in horizontal in a good way like theirs