...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
March 12, 2012

padding in background image aligned to the right

Question by Naor

I have this html:

<div class="warning">
    <span>text text text</span>
</div>

and this css:

.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat right center; 
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}

This is the result:
enter image description here

The problem is that the background image that aligned to the right don’t have padding between it and the border. How can I add a padding between the image and the border?
(I cannot add elements to the div!)

Answer by Dinesh Swami

Without any changes in html, and only a little change in css you can accomplish that .Try this css – I just change the position of the warning icon.

background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;

<div class="warning">
    <span>text text text</span>
</div>


.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center; 
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}

enter image description here

Answer by Starx

Setup your css in this way

background-color: #F2EEBB;
background-image: url('http://confluence.jetbrains.net/download/attachments/33436/warningIcon.png');
background-position: right;
background-repeat: no-repeat;

Demo

Read more

Compare attributes title to url params

Question by swan

I have a small plugin from the net to fetch url params:

$.extend({
    getUrlVars: function () {
        var vars = [],
            hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        return $.getUrlVars()[name];
    }
});

This extracts params from url, e.g.:

http://mysite.com/page?slideshow=video&title=General Overview

I want to match the title param to an existing link which has the same title as the param “title”, and do something if match found, in this case General Overview:

<a href="/some-colorbox-page" class="colorbox" title="General Overview">View video</a>


        var isSlideshow = $.getUrlVar('slideshow');
        if (isSlideshow === 'video' && $('a.colorbox', '.video').length) {
            var titleAttr = $('a.colorbox').attr('title');
            var title = $.getUrlVar('title');
            $(window).bind('load', function () {
                if (titleAttr  === title) {
                  $('a.colorbox', '.video').each(function()) {
                     $(this).trigger('click');
                  });
                }
            });
        }

But this doesn’t work.

Shortly, when a visitor visit the link (http://mysite.com/page?slideshow=video&title=General Overview), I want to trigger an event click to an element that has the same title as the value of url param “title”.

Note the white space between General and Overview. This thing makes the query a bit complicated. I can not control the title attributes, but may control the title param.

Any help would be very much appreciated.

Thanks

Answer by Starx

Try this

title = decodeURIComponent(
    (RegExp('title=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
$('a[title='+title).trigger('click');

Tested fully works

Read more

SESSION missing from view

Question by KYSH

as per title above, when I trigger the controller with a hyperlink, it does runs the controller function but I couldn’t get the value of SESSION after redirect from controller. The code is as follows…

function langpref($lang){       
    $this->load->helper('url');
    redirect(ABSOLUTE_PATH, 'location');        

    $this->session->set_userdata('cur_lang', 'xxx');        
}   

*Note: ABSOLUTE_PATH is a constant of the hyperlink, and I already load the SESSION library in the autoload file.

In my view file, I written the code as follows…

<?php echo $this->session->userdata('cur_lang');?>

and it doesn’t print out the SESSION value.

Answer by Starx

First Approach: You cannot access session variables like that

<?php $ci =& get_instance(); ?>
<div>
   <?php echo $ci->session->userdata('cur_lang') ?>
</div>  

Second Approach: Another way you can do this is pass the session data to the view

On your controller

$data['userdata'] = $this->session->userdata;
$this->load->view('your/view', $data); 

On your view

echo $userdata['cur_lang'];
Read more

Jquery Empty validation for text box

Question by user1263374

I’ve a text box in a form,when a user submits the form,it should check whether the user has filled it,other validation would be have some min characters,he has to fill.

here is my code,which is not validating


$('.textboxid').bind("submit", function() {
  if($(this).val() == "") {
    jQuery.error('Fill this field');
    return false;
  }
});

Answer by Starx

Your code is not validating because, you are binding submit event on a textbox. You should use forms to do that.

Apart from sudhir’s answer, which will work fine. To provide an alternative to it. You can use regex validations too.

An Nice example, which adds errors messages after the textbox as well.

$("#yourFormId").submit(function() {
    var inputVal= $("#yourTextBoxId").val();
    var characterReg = /^([a-zA-Z0-9]{1,})$/;
    if(!characterReg.test(inputVal)) {
        $("#yourTextBoxId").after('<span class="error">Maximum 8 characters.</span>');
    }
});
Read more

Jquery .hover() divs overlapping and wont fade out

Question by Lance Hadley

I’ve been banging away at this and can’t seem to fix this. Ultimately I’m trying to make a drop down nav bar using jquery and divs which reveal by hovering. I’ve almost got it down, but thing is when I have two together and they overlap I can’t get the bottom one to fade out.

Are there any suggestions for how to do this.

<!-- Home Tab -->

<div id="m_bar_home">
  <script src="jquery-1.7.1.js"></script>
  <script>      var hide = false;
     $("#m_bar_home, #m_dddhome").hover(function(){
         if (hide) clearTimeout(hide);
         $("#m_dddhome").fadeIn("fast");
     }, function() {
         hide = setTimeout(function() {
             $("#m_dddhome, #m_ddd_lts").fadeOut("fast");
         }, 250);
     });
     </script> 

  <div id="m_dddhome" >Allo there</div>
  </div>

  <!-- Learn To Sail Tab -->

<div id="m_bar_lts">
  <script src="jquery-1.7.1.js"></script>
  <script>      var hide = false;
     $("#m_bar_lts, #m_ddd_lts").hover(function(){
         if (hide) clearTimeout(hide);
         $("#m_ddd_lts").fadeIn("fast");
     }, function() {
         hide = setTimeout(function() {
             $("#m_dddhome, #m_ddd_lts").fadeOut("fast");
         }, 250);
     });
     </script> 

  <div id="m_ddd_lts" >Allo there</div>

Here is a demo

I think it has something to do with an if function but I’m not sure.

Any ideas?

Answer by Starx

Your coding is very beginner level and very inefficient. I am not trying to offend, but

  1. You are including jQuery twice on same page.
  2. Function call are 100% redundant for both cases. You are writing the same code again and again multiple times.

You should assign a common selector for every div. What if next you have 100 divs, are you going to include 100 jquery files, and same function again and again for each element.

This is how you should do it.

$(".hover").hover(function(){               
    $(this).children(".inner").fadeIn("fast");      
}, function() {    
    $(this).children(".inner").fadeOut("fast");     
});    

See demo

I made some changes to the markup as well to add a common class.

Read more

Added overflow-y but now have new side effect

Question by santa

I have a web-based tool where there are divs with content are placed in a column on the left side of the page. Normally there are just a few of them and the page does not have a scroll, however if there are too many of them the entire page scrolls down.

I need to add an overflow for just the left column containing those divs to keep the rest of the page static.

So, in the original page I had the following:

<td id="launchPad" class="ui-droppable">&nbsp;</td>

In order to add scrollable area I modified it to:

<td id="launchPad"><div id="launchPadY" class="ui-droppable" style="overflow-y:auto;overflow-x:hidden;width:290px;height:500px">&nbsp;</div></td>

It works but added some side effect. Here’s a DEMO of the original behavior. And here’s a new DEMO with added overflow div.

Try dragging one of the divs from the left side to the yellow field in both pages. The new one now has some odd horizontal scroll.

How can I get rid of it?

Answer by Starx

Make some changes on your dragdrop-client.js

newCard.draggable({
    handle: ".card",
    stack: ".card",
    revert: "invalid",
    scroll: "false",
    start: function() {
        $(this).effect("highlight", {}, 1000);
        $(this).css( "cursor","move" );
    },
    stop: function() {
         $(this).css("cursor","default");
    }
}); 
Read more

Slide to right using .animate () width

Question by Matt Jones

after reading all the questions related to this I still can’t seem to figure out how to make it work for me.

I’ve got a list of social icons that I would like to have slide from left to right when hovering over “Follow Me” and then slide back into hiding when hovered away.

Here is the current code in JSFIDDLE

If you make the fix, can you point out where I made my mistakes? I’m still very new to this. Thanks so much!

Answer by Gary.S

This may not be exactly what you are looking for but is pretty close to what you are asking for. I have stopped using UL and LI’s for the icons and just used a div and spans, this can be changed back if required. The main issue is setting the width to a specific value (percent won’t work).

$('.social-top').hide();

$('#social-grid').mouseenter(function() {
    $('.social-top').show();
    $('.social-top').stop().animate({
        width: 225
    }, 1000);
});

$('#social-grid').mouseleave(function() {
    $('.social-top').stop().animate({
        width: 0
    }, 1000, function() {
        $('.social-top').hide();
    });

});​

This should get you most of the way there. I use show/hide to resolve an issue with 0 width and inline-block elements still being shown.

Example:

http://jsfiddle.net/infiniteloops/NqrKK/13/

Answer by Starx

There are many logical flaws in your code:

  1. Initially you are hiding the container, therefore closing all possibilities of the event ever being triggered
  2. You selector itself is an li item and there is no child <li> inside it.
  3. And Increasing the width property of the element does not take it to left. You need left, right or even padding-left or margin-left

Your syntactical mistake was, the properties to be animated and the time was inside the same curly braces. The correct syntax

$('element').animate(
   {
       //css properties
       left: "50"
   },
   5000 //The time in milliseconds or `fast`, `slow`
);

Use this

$('.social-top li:not(.social-flyout)').hover(function() {
    $('.social-top').animate({
        right: 0
    },"fast"
    );
});

I also gave position: absolute to the .social-top. Here is a working Demo here

Read more

How to use jQuery to hide a parent <div>

Question by H. Ferrence

I want to be able to hide an entire container when I check a checkbox.

* HTML *

<div class="showIt">
    <div>abc</div>
    <div>123</div>
    <div><input type="checkbox" /></div>
</div>

* CSS *

div.showIt {
    display:inherit;
}
div.hideIt {
    display:none;
}

* JavaScript (it does not work) *

<script>
jQuery.support.cors = true; // needed for ajax to work in certain older browsers and versions

$(document).ready(function(){

    $(this).change(function(e) {

        $(this).parent().toggleClass('showIt hideIt');

        $(this).closest("div").toggleClass('showIt hideIt');

    });

}); // end .ready()
</script>

Answer by Starx

You are syntactically wrong.

$(this) on your code does not select any element at that time.

$("input:checkbox").change(function(e) {
// ^ This here tell to select an input element of type `checkbox` and then attach an event to it
    $(this).parent().toggleClass('hideIt'); 
    //               ^ Here provide show those classes which you want to toggle, giving multiple class does not toggle between them

    $(this).closest("div").toggleClass('hideIt');
    //This is does same thing as above statement

});

You do not neeed

div.showIt {
    display:inherit;
}

Only toggle the .hideIt It is more than enough

Demo

Read more

Highlight multiple items on hover's condition

Question by Ahhhhhhhhhhhhhdfgbv

Okay sorry for the title, wasn’t too sure how to phrase it.

So we have a project going, and we are offering multiple incentives depending on what people donate (similar to Kickstarter if you know what that is).

Anyway, what we have ben trying to figure out is when someone hovers on one price range we want the items they will receive to have full opacity, and then the same for the further down donation values.

Maybe the image will make more sense..

So the blue is the hover, and when you hover over the “$1+”, items 1, 3, 4 are opaque. But when you hover over the “$15+” only items 1, 3 are opaque.

There are around 20 items, and 15 price brackets, all in which are interlinked with one another.

I assume this has to be one in JS, something I know nothing about.

Thank you :]

Edit:
Thank you for all the tips. I have completed the project with the css3 :not

And the fallback will be JS

Answer by Starx

I will give a rather simple solution.

Give every boxes classes of price where should be opaque on. Kinda like

<div id="item1" class="p1 p15">Item 1</div>

Then, on your price links use the classname as the id for the specific links

   <a class="price" id="p1">$1+</a>

Then use the

$(".price").mouseover(function() {
           $(".items").css("opacity", 0.4);
           id = $(this).attr('id');
           $("."+id).css("opacity", 1);
});

Demo

Demo 2 Including the styles

Read more

Aligning these three containers evenly

Question by Evan

I would like this layout to look as follows:

__________________________
|  |                      |
|  ------------------------
|__|______________________|

That is how I want the header to look. However, as you can see at the below link, the two div’s on the right side are dropping off:
http://jsfiddle.net/A5YDJ/3/

Any ideas?

Answer by Filype

You forgot to add float:left to the #left-box

#left-box{
 width:190px;
 height:90px;
 background-color:blue; 
 float:left;
}

Have a look at this: http://jsfiddle.net/puCrJ/

Answer by Starx

Use

float:left;

Check you updated fiddle here

Read more
...

Please fill the form - I will response as fast as I can!