I need to put script from jsFiddle to work

Question 1

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

Answer by Starx

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.

Question 2

Question by justcode

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

Answer by Ravi

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

Answer by Starx

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; }

Question 3

Question by Chris Danger Gillett

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

Answer by Ziumin

Ziumin

Try this

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

Answer

Answer by Starx

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 🙂

Question 4

Question by Mark

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

Answer by Starx

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';

Question 5

Question by Nathan Bankhead

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 –

I have a very basic visit counter but it only works in sessions, I need it to work globally?
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

Answer by Starx

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

Question 6

Question by MSajjadi

MSajjadi

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

Answer

Answer by phpGeek

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

Answer by Starx

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.

Question 7

Question by bonny

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

Answer by Starx

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);
   //...


}

Question 8

Question by Shahrukh

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

Answer by Engineer

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

Answer by Starx

Starx

You can do this using onerror and onload event handlers

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

im.onerror = function() {
   //handler
};

Question 9

Question by Only Bolivian Here

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

Answer by Alex

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

Answer by Starx

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;
}

Question 10

Question by tintincutes

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

Answer by Starx

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();
});

Tag: image

I need to put script from jsFiddle to work

Question by Voyager

Answer by Starx

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

Question by justcode

Answer by Ravi

Answer by Starx

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

Question by Chris Danger Gillett

Answer by Ziumin

Answer by Starx

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

Question by Mark

Answer by Starx

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

Question by Nathan Bankhead

Answer by Starx

SESSIONS are NOT for global storage.

Blured background image with css

Question by MSajjadi

Answer by phpGeek

Answer by Starx

how to upload multiple files

Question by bonny

Answer by Starx

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

Question by Shahrukh

Answer by Engineer

Answer by Starx

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

Question by Only Bolivian Here

Answer by Alex

Answer by Starx

auto fit image in div / jquery

Question by tintincutes

Answer by Starx

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