Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This display exactly the image that I posted. However, I didn't use a drop-down. </p> <p><strong>HTML</strong></p> <pre><code> &lt;div id="nav-country"&gt; &lt;div id="top-country"&gt; &lt;div id="left-top-c-container"&gt; &lt;?php if ($_SESSION['australasia']==1) { ?&gt; &lt;img id="auz-img" src="&lt;?php echo get_template_directory_uri(); ?&gt;/assets/images/auz.png" alt="flag icon auztralasia"&gt; &lt;p&gt;AUZ&lt;/p&gt; &lt;?php } else { ?&gt; &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/assets/images/uk.png" alt="flag icon united kingdom"&gt; &lt;p&gt;UK&lt;/p&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;div id="right-top-c-container"&gt; &lt;div id="right-arrow"&gt; &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/assets/images/arrow_dropdown.png" alt="small arrow image"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="bottom-country"&gt; &lt;?php if ($_SESSION['australasia']==1) { ?&gt; &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/assets/images/uk.png" alt="flag icon united kingdom"&gt; &lt;p&gt;UK&lt;/p&gt; &lt;?php } else { ?&gt; &lt;img id="auz-img" src="&lt;?php echo get_template_directory_uri(); ?&gt;/assets/images/auz.png" alt="flag icon auztralasia"&gt; &lt;p&gt;AUZ&lt;/p&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>/* COUNTRY FLAGS SELECTORS ================================================== */ #nav-country { position: absolute; z-index: 11; right: 2%; top: 13px; } #top-country { width:84px; height: 26px; font-size: 11px; line-height: 13px; font-family: 'Open Sans', sans-serif; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: #EEEEEE; } #left-top-c-container { float: left; width:64px; height: 26px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } #right-top-c-container { float: left; width:20px; height: 26px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; background-color: #E2E2E2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #bottom-country { opacity: 0; width:84px; height: 26px; font-size: 11px; line-height: 13px; font-family: 'Open Sans', sans-serif; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border-top-right-radius: 0px; background-color: #E2E2E2; visibility: hidden; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #bottom-country:hover, #bottom-country:focus { visibility: visible !important; opacity: 1 !important; } /* Show the total country list */ .visible { visibility: visible !important; opacity: 1 !important; } #right-arrow img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* Add the border to the arrow */ .rotate-on { border-bottom-right-radius: 0px !important; } /* Rotate the selected country drop-adown arrow */ .rotate-on img { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand'); /* IE8 and below */ } #top-country p, #top-country img, #bottom-country p, #bottom-country img { float: left; /* margin-top: 6px; */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #left-top-c-container img, #bottom-country img{ /* margin: 7px 8px 7px 10px; */ margin: 7px 8px 7px 9px; } #top-country p, #bottom-country p { margin-top: 7px; } #top-country #right-arrow { background-color: #E2E2E2; display:inline-block; margin-top: 10px; margin-left: 4px; } /* Add color text effect on the list of country */ #bottom-country:focus p, #bottom-country:hover p { color: #FFA217; } img#auz-img { margin: 7px 4px 7px 9px; } </code></pre> <p><strong>Jquery</strong></p> <pre><code> jQuery(document).ready(function() { jQuery("#top-country").hover(function(){ // Add class rotate-on to the jQuery("#right-top-c-container").toggleClass("rotate-on"); jQuery("#bottom-country").toggleClass("visible"); }); // Let the arrow pointing down when we are hovering the country list jQuery("#bottom-country").hover(function(){ jQuery("#right-top-c-container").toggleClass("rotate-on"); }); jQuery("#bottom-country").click(function(){ // We want to redirect to the correct url var country_value = jQuery("#bottom-country").children("p").text(); if(country_value=="UK"){ var pathname = window.location.href; // console.log(pathname); pathname = pathname.replace('e.au.t','e.t'); pathname = pathname+"?selected_c=uk"; window.location.href = pathname; } else if (country_value=="AUZ") { var pathname = window.location.href; // console.log(pathname); pathname = pathname.replace('e.t', 'e.au.t'); pathname = pathname+"?selected_c=au"; // console.log(pathname); window.location.href = pathname; } }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload