Fade out a border with CSS

Question 1

User2180108’s Questions:

I have a footer that has a dashed top border like so:

footer 
{
border-top:1px dashed #ddd;
color:#999;
}

I was wondering how I would be able to make the dashed line fade out from left to right. Thanks!

Answer

Starx

You can create this using CSS Gradients. Check here.

To make it as simple as possible, start off by creating two divs:

<div id="borderbox">
    <div id="box">
    </div>
</div>

We will use the outer box and give it a Gradient Background and then give a white background to the inner div, thus faking the border.

#borderbox {
    background-color: #eee; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(to right, #000, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(to right, #000, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(to right, #000, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(to right, #000, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #000, #fff); /* Standard syntax; must be last */    
    width: 500px;
    height: 200px;
    display: block;
    padding: 1px 0 0 0;
    opacity: 0.5;
    border-top: 1px dashed #ccc;
}
#box { background: #fff; width: 500px; height: 200px;  margin-top: -1px; }

Demo: http://jsfiddle.net/XwJEB/1

Question 2

Sebastian’s Questions:

Sebastian

I was having a little trouble with my array in PHP.

I have the following the array:

Array
(
    [0] => banana
    [1] => apple
    [2] => raspberry
    [3] => kiwi
    [4] => cherry
    [5] => nuts
)

But I want to kick out ‘kiwi’ and shift all other keys up, to get the following…

Array
(
    [0] => banana
    [1] => apple
    [2] => raspberry
    [3] => cherry
    [4] => nuts
)

I am sure someone here knows how to get it done, php’s shift only takes to first key and not something specific.

Thanks in advance

Answer

Kolink

This is what array_splice does for you. It even lets you insert new entries there if you so choose.

Answer

Starx

AFAIK, There is not any inbuilt function to do this, but you can create one. What you have to do is, delete an specific element and then recalculate the keys.

function a_shift($index, $array) {
     unset($array[$index));
     return array_values($array);
}

Question 3

Hick’s Questions:

Hick

This is what I do to take out texts from a html usng Jquery:

$(".text").each(function(){

        var texts = items[textCount]['data']['title'];
        $(this).text(texts);
         textCount = textCount + 1;
      });

My problem if I want the texts to be a url, then it doesn’t show up as link but also a string added to the texts variable. How do I show a link? How can add it as a href to the texts?

Output should be something like this:

Text + url

and not text being linked as url: "<a href=""+link+"">"+texts+"</a>"

Answer

Starx

Using .attr() function like this.

$(this).attr("href", "your link");

But this will only work, if you have an anchor tag if not you can create an anchor tag on the fly.

$(this).html("<a href=""+link+"">"+texts+"</a>");

Question 4

Fstephen07’s Questions:

fstephen07

I’m attempting to create multiple divs on the fly by using a for loop. This code does not give any results. My expectation is for it to create separate divs with the id a1,a2,a3, etc. Can anyone explain why it doesn’t? I understand there are other solutions to this on SO, but this is a learning experience for me and I want to know why my solution does not work.

function createDiv(divid,divcontent){
  this.div = document.createElement("div");
  this.div.setAttribute("id",divid);
  this.div.innerHTML = divcontent;
}

var keys = [1,2,3,4,5,6,7,8,9,0];
for (i=0; i<keys.length;i++){
    createDiv("a"+i,i);
}

Answer

hek2mgl

You’ll have to append the node to a parent – existing – node in the document to make it appear. Like this:

function createDiv(divid,divcontent){
  this.div = document.createElement("div");
  this.div.setAttribute("id",divid);
  this.div.innerHTML = divcontent;

  var parent = document.getElementById('mydiv');
  parent.appendChild(this.div);
}

Answer

Starx

Your function only creates the div you have to add it to the DOM

function createDiv(divid,divcontent){
  this.div = document.createElement("div");
  this.div.setAttribute("id",divid);
  this.div.innerHTML = divcontent;
}

var keys = [1,2,3,4,5,6,7,8,9,0];
for (i=0; i<keys.length;i++){
    var newDiv = createDiv("a"+i,i); //Store the div you just created here
    document.getElementById('yourdivcontainer').appendChild(newDiv); //And add it to the DOM
}

Question 5

Adam’s Questions:

Adam

I have a question about hacking file uploads. Below shows the kind of setup I’m using and my concern is around the action that gives the full path to the upload script:

<form action="http://www.mydomain.com/scripts/php/photo_processing.php?page=join method="post" enctype="multipart/form-data">
  <input type="file" name="file" class="fileProfile"><br>
</form>

Can someone use the full path to send repetitive files constantly and then fill a web server disk space etc? eg: can you send files using this path outside the website and/or in a way that allows automated constant uploads?

Note: the php file has the following at the top – it is set to only this domain name – needed because of AWS Cloudfront POST limitation

header("Access-Control-Allow-Origin: http://www.mydomain.com");

Answer

Starx

No, they are basically prevented by cross domain policy. Unless the mydomain.com gives you access to it.

Question 6

Undermine2k’s Questions:

Undermine2k

I have form fields i’m gathering from my form using

 var dataString = $("form").serialize();

I am then sending this over to my controller as dataType “html”

The var_dump for my dataString looks like this (so far, but it will contain email address, select options, etc)

array(3) {
  ["username"]=>
  string(5) "mikey"
  ["firstname"]=>
  string(4) "tes%"
  ["lastname"]=>
  string(6) "tester" }

my question is as follows: What is the proper method of form sanitation i should be using before I send data to my model? I know I need to strip special characters and the like, is there some prepackaged class I should be using?

Do I need to break my data up like

  $username =  trim(Array[0]) ;

Answer

Starx

Enable XSS Filtering on application/config/config.php

$config['global_xss_filtering'] = TRUE;

Question 7

Majed’s Questions:

Majed

Is it possible to retrieve the :active state CSS with jQuery? The reason why I ask this is because I’m trying to make dynamic code so I don’t have to always tweak the jQuery when stylizing an element.

Edit

To elaborate, I don’t want to .addClass() or .removeClass() because the class might not be the same for every element being affected by my jQuery code.

Edit 2

Let me further explain what I’m trying to do.

I’m trying to create a plugin for my own personal use, and instead of having to tweak the code every time I have a new element that will be affected by the plugin, I want it to grab what’s already in the CSS so I won’t have to lose time. What I’m trying to do is create a button with an :active state, and when the user clicks the button, it will “freeze” at that state (my thoughts are to grab the CSS from that state and put them in the .css() command). Now, the reason why I don’t want to .addClass() or removeClass() because the :active state is going to differ from one button to another.

Answer

Starx

Pseudo classes such as :active cannot be retrieved and manipulated from jQuery. Instead of trying to get this work, I have a workaround to solve this problem.

First create a style container with only the :active part. For example:

<style id="activeLink">
    a:active { color: #f00; }
</style>

Now you can manipulate this using the jQuery, to retrieve current styles

var curStyle = $("#activeLink").html();

To modify the style

$("#activeLink").html("a:active { color: #000; }");

Question 8

Rachelle Bennington’s Questions:

Rachelle Bennington

My navigation bar currently is scrunching all my text together. I have “headers” for the dropdown list, and the headers aren’t forcing a line.

The HTML looks like this:

<li><p>Services</p><ul>
    <li id="ITServices"><p>IT Services</p></li>
    <li><a href="port_collab_work.html">Portals, Collaboration & Workflows</a></li>
    <li><a href="business_intel_dash.html">Business Intelligence & Dashboards</a></li>
    <li><a href="mobile_development.html">Mobile Development</a></li>
    <li><a href="custom_application_development.html">Custom Application Development</a></li>
    <li id="healthcare"><p>Healthcare Services</p></li>
    <li><a href="healthcare.html">EMR, ICD 10 and Healthcare Consulting</a></li>
</ul></li>

CSS looks like this:

#healthcare p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

#ITServices p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

.navbar li:hover ul {
    left: 15px;
    top: 40px;
    background: #7FBA00;
    padding: 1px;
    width: 280px;
    border: none;
    text-align: left;
}

.navbar li:hover ul a {
    margin: -7px -10px -7px -15px;
    text-align: left;
    padding: 0px 0px 0px 10px;
    display: block;
    font-size: 11px;
    width: 259px;
    line-height: 25px;
    color: #000;
    background-color: #F0F0F0;
    text-decoration: none;
    border-left: 10px solid #7FBA00;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
}

.navbar li:hover ul a:hover {
    background: #7FBA00;
    border-left: solid 10px #fff;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    width: 260px;
}

Ahhh! Right? I’m trying to get it to all display in a list with basically line breaks after each li element. Help?

Answer

Starx

Basically a rule is over-riding your style. display property called block makes an element to behave like a block element, thus covering full line.

Your use might be the following, so try this

li > ul li { display: block; }

Question 9

Joesandeek’s Questions:

joesandeek

<div id="container">
    <div class="sub">a</div>

    <span id="add">add</span>
</div>            

$('#add').click(function(){
   $('#container').append('<div class="sub">a</div>');
})

This append element to #container on bottom. How can i add this element on bottom without last element(#add)? I would like have always #add on bottom.

Fiddle: http://jsfiddle.net/nk67d/

Answer

tymeJV

Try

$("#add").prepend('<div class="sub">a</div>');

See fiddle: http://jsfiddle.net/nk67d/1/

Answer

Starx

Use .before(), it adds the markup before the matched elements.

$('#add').before('<div class="sub">a</div>');

To complete the answer:

$('#add').click(function(){
   $(this).before('<div class="sub">a</div>');
});

Question 10

M4l33n’s Questions:

m4l33n

Values are stored under company_id like

["2"]
["2", "1"]

where 2 and 1 are the IDs of companies. Now i want all result of ID 2. How can i fire query again json encoded data.

select * from tbl where company_id = 2

This is what I need to perform.

For more info, json format is the result of dynamic (fill by database values) Select List in Zend2.

And what if it was array instead of json, how this simple select query can be executed.

Answer

M8R-1jmw5r

As each ID is a number inside double quotes you can just query with a LIKE statement:

select * from tbl where company_id LIKE '%"2"%'

And what if it was array instead of json, how this simple select query can be executed.

You can store JSON into a mysql database because it is a string. But an array is not a string, so you can not store it there. You would need to serialize it but for that you should prefer JSON.

The alternative would be to create a table that stores the relationships to the companies.

Answer

Starx

MySQL has a datatype called SET You can use this data type on this task. This will allow you to enter comma separated values and still be able to query as per single item.

Manual: http://dev.mysql.com/doc/refman/5.0/en/set.html

Your query will have to be updated to something like this:

SELECT * FROM tbl_name WHERE FIND_IN_SET('2', company_id);

But, this problems arises because the tables are not normalized properly. Adding a reference table and querying this reference table will be a much better option, when the application reaches large-scale.

Month: April 2013

Fade out a border with CSS

User2180108’s Questions:

PHP – Can I shift an array from a specific key?

Sebastian’s Questions:

How to replace text with links using javascript?

Hick’s Questions:

For loop not creating Div

Fstephen07’s Questions:

HTML File Upload action – can this be hacked to spam endless file uploads

Adam’s Questions:

Proper Form Input Sanitation

Undermine2k’s Questions:

Retrieving "Active" state CSS with jQuery

Majed’s Questions:

Forcing line on navigation bar (unordered list)?

Rachelle Bennington’s Questions:

Append without last element

Joesandeek’s Questions:

How to apply WHERE clause again array or jscon encoded value

M4l33n’s Questions:

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