August 23, 2012

I need to put script from jsFiddle to work

Question by Voyager

I have one small problem… I need to put this script http://jsfiddle.net/mctcs/ to work on my page, but i don’t know how to do it…. What to copy where, and how to make jquerry working! I don’t have pre-knowledge about jquerry and don’t know how it functions…

I need instructions like where to paste which code (head, body), and what file to make (js, html) also what values to change so it works! Can someone zipp example or something?

I would be forever gratefull!

Thanks!!

Answer by Starx

We can see the full paged version of a fiddle by adding an /show/ at the end.

Save this version of the fiddle. It contains all the scripts and resources needed for that particular fiddle to run.

Compare and meet them in your application.

July 3, 2012

How to make the <img> tags line up horizontally in the div?

Question by justcode

I need to make the images show up side by side horizontally in the div. How can I do that?

HTML:

<div class="Wrapper">
  <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>

Reference: jsFiddle

Answer by Ravi

You could also use css properties display:inline-block or float : left to achieve this.

HTML Code

<div>
    <img ... />
    <img ... />
    <img ... />
</div>

CSS Code

div img{ display: inline-block;}

or

div img{ display: block;float: left;margin-right: 5px;}

Answer by Starx

On the general assumption of your code being something like this

<div>
    <img ... />
    <img ... />
    <img ... />
</div>

Then, a simple CSS property will get the job done.

div img { display: inline; }

On seeing your HTML portion. You can use the following CSS to get them online.

.partners img { display: inline; }
July 2, 2012

How do I use an IF statement in PHP to decide if I should show an image or not?

Question by Chris Danger Gillett

I’m setting up a weather page using the wunderground.com API. Anyway, I want to do the following:

Of the variable $weather is equal to Clear, I want to display an image.

I’ve tried this:

if ($weather=="Clear") echo <img src="http://example.org/clear.gif" alt="Clear"/> 

What do I need to do instead?

Answer by Ziumin

Try this

if ($weather=="Clear") echo '<img src="http://example.org/clear.gif" alt="Clear"/>';

Answer by Starx

The code you tried will render ERROR. You need to place the HTML text and any string within quotes, before you echo them.

if ($weather=="Clear") echo '<img src="http://example.org/clear.gif" alt="Clear"/>'

Remaining, there is nothing else to improve ๐Ÿ™‚

April 18, 2012

How can I detect if an image object is being displayed?

Question by Mark

When I load an image object in the DOM for large images this will freeze the display for a moment on the iPad.

For testing purpose, let a GIF animation loader spin and add a large image to the DOM, when the image is loaded and added to the DOM you will notice that that GIF animation will freeze until the image is being displayed. This freeze will be enough to disable the CSS3 animation effect on it.

Is there something like

var image = new Image();
image.ready = function() { alert('the image is being displayed.') };

Answer by Starx

You can check if the image has been loaded like this

var img = new Image();
img.onload = function() {
  alert('Done!');
}
img.src = '/images/myImage.jpg';
April 16, 2012

How do create a global visit counter that echoes an image for every visit?

Question by Nathan Bankhead

Basically I want to create a global visit counter of a web page, then I want to display an image for every visit. So if 10 people have visited the page, 10 random images from the server will be echoed on that page. When the 11th visitor arrives on the page a new random image will be echoed and so on…

So I need help with two things really –

  1. I have a very basic visit counter but it only works in sessions, I need it to work globally?
  2. How do I echo images according to the number of visits?

Here is the basic code I have for a visit counter:

if(isset($_SESSION['views']))
   $_SESSION['views']=$_SESSION['views']+1;
else
   $_SESSION['views']=1

echo "Page views: ".$_SESSION['views'];

I am still a massive beginner at php and any help would be hugely appreciated ๐Ÿ™‚

Thanks guys.

Answer by Starx

SESSIONS are NOT for global storage.

They are only alive till the website is open.

You should use database to store the global variable.


Now, coming to the image display part. You can name of images with number specific to no of visits.

For example:

4.jpg will be the Image that is when to the fourth guy

Next, you can use a simple snippet like this

$visitCounter = "?"; //Get the count using a logic
echo "<img src="$visitCounter.jpg" />"; //Use it to create a image path
April 15, 2012

Blured background image with css

Question by MSajjadi

Is there anyway to blur an image with CSS, specially for backgrounds?

Answer by phpGeek

Yes, there is.
You can use two different backgrounds, one with sharp color (the main picture) and another blurred picture:

body  {
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap {
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}

To see the detailed tutorial click here

EDIT:
For an image you can use svg filters as below:
The <feGaussianBlur> element is used to create blur effects:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg> 
  • The id attribute of the element defines a unique name for
    the filter
  • The blur effect is defined with the element
  • The in=”SourceGraphic” part defines that the effect is created for
    the entire element
  • The stdDeviation attribute defines the amount of the blur
  • The filter attribute of the element links the element to the
    “f1” filter
    See here for detailed explanation

Answer by Starx

This is not possible through CSS.

You have to process the image using a server-side language and generate a blurry one and then use it in the CSS backgrounds.

April 9, 2012

how to upload multiple files

Question by bonny

i like to post a number of images on my site.

it works for single post when i just use one image. as i tried to use with multiple images it doesnt work anymore and i dont understand why this doesnt work. to show my code:

if (isset($_POST['var1'];
 ...
 ...        $Bild1 = $_FILES['image1']; 
            $Bild2 = $_FILES['image2'];
            $Bild3 = $_FILES['image3'];
            $Bild4 = $_FILES['image4']; 
            $Bild5 = $_FILES['image5'];
            $Bild6 = $_FILES['image6'];
            $Bild7 = $_FILES['image7'];
            $Bild8 = $_FILES['image8'];
            $Bild9 = $_FILES['image9'];
            $Bild10 = $_FILES['image10'];

                $errors = array();
                $allowed_extension = array('jpg', 'jpeg', 'png', 'bmp', 'tiff', 'gif');

                $file_name_1 = $_FILES['image1']['name'];
                $file_name_2 = $_FILES['image2']['name'];
                $file_name_3 = $_FILES['image3']['name'];
                $file_name_4 = $_FILES['image4']['name'];
                $file_name_5 = $_FILES['image5']['name'];
                $file_name_6 = $_FILES['image6']['name'];
                $file_name_7 = $_FILES['image7']['name'];
                $file_name_8 = $_FILES['image8']['name'];
                $file_name_9 = $_FILES['image9']['name'];
                $file_name_10 = $_FILES['image10']['name'];

                $split_1 = explode('.', $file_name_1);  
                $split_2 = explode('.', $file_name_2);
                $split_3 = explode('.', $file_name_3);
                $split_4 = explode('.', $file_name_4);
                $split_5 = explode('.', $file_name_5);
                $split_6 = explode('.', $file_name_6);
                $split_7 = explode('.', $file_name_7);
                $split_8 = explode('.', $file_name_8);
                $split_9 = explode('.', $file_name_9);
                $split_10 = explode('.', $file_name_10);

                $split_1[0] = '1';
                $split_2[0] = '2';
                $split_3[0] = '3';
                $split_4[0] = '4';
                $split_5[0] = '5';
                $split_6[0] = '6';
                $split_7[0] = '7';
                $split_8[0] = '8';
                $split_9[0] = '9';
                $split_10[0] = '10';

                $file_basename_1 = $split_1[0];
                $file_basename_2 = $split_2[0];
                $file_basename_3 = $split_3[0];
                $file_basename_4 = $split_4[0];
                $file_basename_5 = $split_5[0];
                $file_basename_6 = $split_6[0];
                $file_basename_7 = $split_7[0];
                $file_basename_8 = $split_8[0];
                $file_basename_9 = $split_9[0];
                $file_basename_10 = $split_10[0];

                $file_extension_1 = strtolower(end(explode('.', $file_name_1)));
                $file_extension_2 = strtolower(end(explode('.', $file_name_2)));
                $file_extension_3 = strtolower(end(explode('.', $file_name_3)));
                $file_extension_4 = strtolower(end(explode('.', $file_name_4)));
                $file_extension_5 = strtolower(end(explode('.', $file_name_5)));
                $file_extension_6 = strtolower(end(explode('.', $file_name_6)));
                $file_extension_7 = strtolower(end(explode('.', $file_name_7)));
                $file_extension_8 = strtolower(end(explode('.', $file_name_8)));
                $file_extension_9 = strtolower(end(explode('.', $file_name_9)));
                $file_extension_10 = strtolower(end(explode('.', $file_name_10)));

                $file_size_1 = $_FILES['image1']['size'];
                $file_size_2 = $_FILES['image2']['size'];
                $file_size_3 = $_FILES['image3']['size'];
                $file_size_4 = $_FILES['image4']['size'];
                $file_size_5 = $_FILES['image5']['size'];
                $file_size_6 = $_FILES['image6']['size'];
                $file_size_7 = $_FILES['image7']['size'];
                $file_size_8 = $_FILES['image8']['size'];
                $file_size_9 = $_FILES['image9']['size'];
                $file_size_10 = $_FILES['image10']['size'];

                $file_tmp_1 = $_FILES['image1']['tmp_name'];
                $file_tmp_2 = $_FILES['image2']['tmp_name'];
                $file_tmp_3 = $_FILES['image3']['tmp_name'];
                $file_tmp_4 = $_FILES['image4']['tmp_name'];
                $file_tmp_5 = $_FILES['image5']['tmp_name'];
                $file_tmp_6 = $_FILES['image6']['tmp_name'];
                $file_tmp_7 = $_FILES['image7']['tmp_name'];
                $file_tmp_8 = $_FILES['image8']['tmp_name'];
                $file_tmp_9 = $_FILES['image9']['tmp_name'];
                $file_tmp_10 = $_FILES['image10']['tmp_name'];

                $file_newname_1 = $file_basename_1 .".". $file_extension_1;
                $file_newname_2 = $file_basename_2 .".". $file_extension_2;
                $file_newname_3 = $file_basename_3 .".". $file_extension_3;
                $file_newname_4 = $file_basename_4 .".". $file_extension_4;
                $file_newname_5 = $file_basename_5 .".". $file_extension_5;
                $file_newname_6 = $file_basename_6 .".". $file_extension_6;
                $file_newname_7 = $file_basename_7 .".". $file_extension_7;
                $file_newname_8 = $file_basename_8 .".". $file_extension_8;
                $file_newname_9 = $file_basename_9 .".". $file_extension_9;
                $file_newname_10 = $file_basename_10 .".". $file_extension_10;

                $path ='a/b/c/'.$id.'/'.$new_file_id.'/';

                if (in_array($file_extension_1, $allowed_extension)=== false){
                    $errors[] = 'errormessage1';
                }
                if (in_array($file_extension_2, $allowed_extension)=== false){
                    $errors[] = 'errormessage2';
                }
                if (in_array($file_extension_3, $allowed_extension)=== false){
                    $errors[] = 'errormessage3';
                }
                if (in_array($file_extension_4, $allowed_extension)=== false){
                    $errors[] = 'errormessage4';
                }
                if (in_array($file_extension_5, $allowed_extension)=== false){
                    $errors[] = 'errormessage5';
                }
                if (in_array($file_extension_6, $allowed_extension)=== false){
                    $errors[] = 'errormessage6';
                }
                if (in_array($file_extension_7, $allowed_extension)=== false){
                    $errors[] = 'errormessage7';
                }
                if (in_array($file_extension_8, $allowed_extension)=== false){
                    $errors[] = 'errormessage8';
                }
                if (in_array($file_extension_9, $allowed_extension)=== false){
                    $errors[] = 'errormessage9';
                }
                if (in_array($file_extension_10, $allowed_extension)=== false){
                    $errors[] = 'errormessage10';
                }

                if ($file_size_1 > 2097152){
                    $errors[] = 'errormessage1';
                }
                if ($file_size_2 > 2097152){
                    $errors[] = 'errormessage2';
                }
                if ($file_size_3 > 2097152){
                    $errors[] = 'errormessage3';
                }
                if ($file_size_4 > 2097152){
                    $errors[] = 'errormessage4';
                }
                if ($file_size_5 > 2097152){
                    $errors[] = 'errormessage5';
                }
                if ($file_size_6 > 2097152){
                    $errors[] = 'errormessage6';
                }
                if ($file_size_7 > 2097152){
                    $errors[] = 'errormessage7';
                }
                if ($file_size_8 > 2097152){
                    $errors[] = 'errormessage8';
                }
                if ($file_size_9 > 2097152){
                    $errors[] = 'errormessage9';
                }
                if ($file_size_10 > 2097152){
                    $errors[] = 'errormessage10';
                }

                if (empty($errors)) {

                if (move_uploaded_file($file_tmp_1, $path . $file_newname_1)) {
                    echo 'success1'; 
                }

                if (move_uploaded_file($file_tmp_2, $path . $file_newname_2)) {
                    echo 'success2'; 
                }

                if (move_uploaded_file($file_tmp_3, $path . $file_newname_3)) {
                    echo 'success3'; 
                }

            }

is there also a way to shorten this code? thanks a lot.

Answer by Starx

You are doing it so wrong. To much redundancy in your code

$allowed_extension = array('jpg', 'jpeg', 'png', 'bmp', 'tiff', 'gif');
foreach($_FILES as $file) {
   // Carry on like this
   $file_name = $file['name'];
   $size = $file['size'];

   //However, you might want to extract the extension like this
   $ext = pathinfo($file_name, PATHINFO_EXTENSION);
   //...


}
April 7, 2012

Does the <img> tag have an "onsuccess" attribute?

Question by Shahrukh

Does the <img> tag have an "onsuccess" attribute? Like "onerror".

I am loading an image. I bind an event with JQuery, which changes image onerror.
i want to show an alert "ONERROR Image loaded successfuly" if onerror image successfully loaded. Otherwise it will show alert "ONERROR image not found".

EDIT:
onload shows alert after loading image. but didn’t tells us that "your real image is loaded" or "browser's default error image is loaded". check here…

http://jsfiddle.net/extremerose71/cHuu6/6/

Answer by Engineer

If you wrote something like:

<img id="im3" src="http://ssl.gstatic.com/gb/images/j_f11bbae8.png" />โ€‹

And also wrote:

$(window).load(function() {
   $("#im3").load( function (){
      alert('load');
   }).error( function (){
      alert('error');
   });
});

(as in jsfiddle onLoad is corresponded to $(window).load) , you will never get any alert, because $(window).load will be called after all resources is already loaded.

But if you would remove src from img:

<img id="im3"/>โ€‹ 

And then add this

$("#im3").attr('src','http://ssl.gstatic.com/gb/images/j_f11bbae8.png' )โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹โ€‹;

line after the load and error listeners , you will see an alert.

So the main problem was , that you were adding listeners after the image has already loaded or failed to load.

Answer by Starx

You can do this using onerror and onload event handlers

var im = document.getElementById('imageid');
im.onload = function() {
   //handler
};

im.onerror = function() {
   //handler
};
April 6, 2012

Placing an icon beside the text of an H1 tag by using a span

Question by Only Bolivian Here

Here’s the HTML I’m trying to use:

<h1>Order Not Paid<span class="not-paid"></span></h1>

Of course if there is a better way please say so.

Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.

When I place text in the span, the icon shows correctly.

What CSS rule can I apply for this effect? Here’s what I have so far (It’s SASS, but easy to grasp):

h1 {
    font-size: 24px;

    span.not-paid {
        background-image: url('/Public/images/remove.png');
        background-repeat: no-repeat;
    }
}

I’d like the icon to appear where the span is.

Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.

<h1>Order Not Paid <img src="@Url.Content("~/Public/images/remove.png")" alt="" /></h1>

Answer by Alex

If the icon is small and not reused anywhere else just set it as part of the h1.

HTML:

<h1 class="not-paid">Order Not Paid</h1>

CSS:

h1.not-paid {
  font-size: 24px;
  padding:0 16px 0 0; /* whatever the dimensions the image needs */
  background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}

A little cleaner this way.

Answer by Starx

First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-block to span and the image height and width.

h1 {
    font- size: 24px;
}

h1 span.not-paid {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}
April 5, 2012

auto fit image in div / jquery

Question by tintincutes

How can I auto-fit an image if my code is like this:

<script type="text/javascript"> 
jQuery.noConflict();
jQuery(document).ready(function () {
    var count = 0;
    function animate() {
        jQuery(".fadein").eq(count).fadeIn(1000);
        count++;
        if(count <= jQuery(".fadein").length) {
            setTimeout(animate, 1000);
        } else {
            jQuery("a.fadein").fadeOut(1000);
            count = 0;
            animate();
        }      
    }
    animate();
});
</script>

Would this be correct?

<script type="text/javascript"> 
    jQuery.noConflict();
    jQuery(document).ready(function () {
        var count = 0;
        function animate() {
            jQuery(".fadein").eq(count).fadeIn(1000);
            count++;
            if(count <= jQuery(".fadein").length) {
                setTimeout(animate, 1000);
            } else {
                jQuery("a.fadein").fadeOut(1000);
                count = 0;
                animate();
            }      
        }
        animate();
    })
            function fitImagetoContainer() {   $("img").each(function(i) {
     $(this).width($(this).parent().width()); //or your logic   
       }); }

//Call the function at load 
      $(window).load(function() {    fitImagetoContainer(); });


//Also call the function when the window resizes  
      $(window).resize(function() {    fitImagetoContainer(); });;
    </script>

Answer by Starx

Here is my throw at your problem

//Create a function to resize the image with respect to parent
function fitImagetoContainer() {
  $("img").each(function(i) {
     $(this).width($(this).parent().width()); //or your logic
  });
}

//Call the function at load
$(window).load(function() {
   fitImagetoContainer();
});


//Also call the function when the window resizes 
$(window).resize(function() {
   fitImagetoContainer();
});
...

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