Jump to content
RicardoCostaTW

Background-Image Select não trabalha em chrome e IE

Recommended Posts

RicardoCostaTW

Boas Pessoal,

Estou com uma dúvida que me anda a comer a cabeça! Tenho uma select box assim:

<label>
                           <select autofocus style="background: transparent; border: 0px;" id="linguas" name="linguas" onchange="selectLinguas()">
                               <option id ="pt" value="pt">Português</option> 
                               <?php for ($k = 1; $k < count($ativas); $k++) {
                                   if ($linguaAtiva == $ativas[$k]) {
                                       ?>
                                       <option selected="selected" value="<?php echo ($ativas[$k]) ?>"><?php echo $linguas[$ativas[$k]]; ?></option> 
                                   <?php } else { ?>
                                       <option value="<?php echo ($ativas[$k]) ?>" ><?php echo $linguas[$ativas[$k]]; ?></option>
                                   <? }
                               }
                               ?>
                           </select>

                       </label>

e quero colocar em cada option uma mini imagem....

eu fiz o seguinte:

select#linguas option[value="pt"] {background-image: url(images/bandeiraPT.png) ; background-position:right; background-repeat:no-repeat;overflow:hidden;}

mas só funciona no Firefox... já dei voltas pela web e não sei como resolver a questão. Ajuda? :)

Edited by brunoais
geshi

Share this post


Link to post
Share on other sites
RicardoCostaTW

mas isto é para implementar em wordpress, e acho que j query não funciona bem.. tentei esse plugin ontem :/

Share this post


Link to post
Share on other sites
RicardoCostaTW

http://nutre.pictonio.pt/ É este site que tou a implementar a combobox....

e o código que tem é:

<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
   <!--<![endif]-->
   <head>
       <meta charset="<?php bloginfo('charset'); ?>" />
       <meta name="viewport" content="width=device-width" />
       <title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title('|', true, 'right');
// Add the blog name.
bloginfo('name');
// Add the blog description for the home/front page.
$site_description = get_bloginfo('description', 'display');
if ($site_description && ( is_home() || is_front_page() ))
   echo " | $site_description";
// Add a page number if necessary:
if ($paged >= 2 || $page >= 2)
   echo ' | ' . sprintf(__('Page %s', 'twentyeleven'), max($paged, $page));
?></title>
       <link rel="shortcut icon" href="<?php echo home_url(); ?>/images/favicon.ico" />
       <link rel="profile" href="http://gmpg.org/xfn/11" />
       <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
       <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
       <!--[if lt IE 9]>
       <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
       <![endif]-->
       <?php
       /* We add some Javascript to pages with the comment form
        * to support sites with threaded comments (when in use).
        */
       if (is_singular() && get_option('thread_comments'))
           wp_enqueue_script('comment-reply');
       /* Always have wp_head() just before the closing </head>
        * tag of your theme, or you will break many plugins, which
        * generally use this hook to add elements to <head> such
        * as styles, scripts, and meta tags.
        */
       wp_head();
       ?>
       <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico">
       <script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

       <?php
       $ativas = get_option('qtranslate_enabled_languages');
       $linguas = get_option(qtranslate_language_names);
       function linguas($language) {
           $url = home_url() . "?page_id=" . get_the_ID() . "〈=" . $language;
           return $url;
       }
       $url = get_page_link(get_the_ID());
       $linguaAtiva = "pt";
       $url = get_page_link(get_the_ID());
       $iniciaisLinguas = get_option(qtranslate_enabled_languages);
       for ($k = 0; $k < count($iniciaisLinguas); $k++) {
           $findme = 'lang=' . $iniciaisLinguas[$k];
           if ($condition = strpos($url, $findme) == true) {
               $linguaAtiva = $iniciaisLinguas[$k];
               break;
           }
       }
       ?>
  </head>

   <body <?php body_class(); ?>>
       <div id="page" class="hfeed">

           <header id="branding" role="banner">
               <div id="reservado">

                   <div id="menu_superior">
                       <?php
                       wp_nav_menu(array('menu' => 'menudireito', 'items_wrap' => '<div id="menuDireito"><div id="menu_right">%3$s</div></div>'));
                       ?>
                   </div>

                   <div id="liguasSelect">

                   <select id="demo-htmlselect">
       <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
           data-description="Description with Facebook">Facebook</option>
       <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
           data-description="Description with Twitter">Twitter</option>
       <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
           data-description="Description with LinkedIn">LinkedIn</option>
       <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
           data-description="Description with Foursquare">Foursquare</option>
   </select>

                       <script type="text/javascript">

                       $('#myDropdown').ddslick({
   onselected: function(selectedData){
       alert("ola");//callback function: do something with selectedData;
   }  
});
                       </script>

                   </div>
               </div> 
               <script>

                   function selectLinguas(){

                       var e = document.getElementById("linguas");

                       var strUser = e.options[e.selectedIndex].value;

                       var link ="<?php home_url(); ?>/?page_id=<?php echo get_the_ID(); ?>";

                       window.location = link+"〈="+strUser;

                   }

               </script>
               <div id="logoNutre">
                   <a href="<?php bloginfo('url') . "?lang=" . $linguaAtiva; ?>"><img src="<?php bloginfo('template_directory'); ?>/images/nutre.jpg" border="0" alt="" width="155px" height="80px" /></a>
               </div>

               <nav id="access" role="navigation">
                   <h3 class="assistive-text"><?php _e('Main menu', 'twentyeleven'); ?></h3>
                   <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                   <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e('Skip to primary content', 'twentyeleven'); ?>"><?php _e('Skip to primary content', 'twentyeleven'); ?></a></div>
                   <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e('Skip to secondary content', 'twentyeleven'); ?>"><?php _e('Skip to secondary content', 'twentyeleven'); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
               </nav><!-- #access -->

           </header><!-- #branding -->
           <!--       <div id="main">-->

estou a fazer alguma coisa mal?

estou mesm um bocado desesperado com isto porque preciso de ter as bandeiras ao lado das linguas :X ate hoje

Share this post


Link to post
Share on other sites
NunoDinis

Este script consoante a escolha já te dá uma imagem. Não sei é como meter dentro da dropdown..

<script>
function changeImage(o) {
if (o.value != "")
 document.getElementById('changeMe').src = o.value; }
</script>

<img id="changeMe" src=""/>
<select onchange="changeImage(this)">
<option value="">Select image</option>
<option value="images/add.png">Portugal</option>
<option value="images/cancel.png">Espanha</option>
</select>

Edited by NunoDinis

Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.