IT - notepad: PHP

Pokazywanie postów oznaczonych etykietą PHP. Pokaż wszystkie posty

Przekazanie zmiennej z PHP do JQERY



echo '<img id="lol" src="'.$config.'" />';



<img id="lol" src="http://cos.pl" />

i potem w jQuery go pobrać





 var cos = $('#lol').attr('src');

JQuery - twarda spacja - SIEROTKI (automatycznie)

Jquery - powiększanie zdjęcia po najechaniu (wyjście nad inne elementy) bez wpływu na zawartość strony

DEMO: http://jsfiddle.net/roXon/HmTrw/

<div id="images">
    <img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
    <img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
    <img src="http://dummyimage.com/150x100/a3d/fff" alt="Image 3" title="Third image"/>
    <img src="http://dummyimage.com/278x125/cf5/fff" alt="Image 4" title="Fourth image"/>
    <img src="http://dummyimage.com/199x120/e46/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/207x480/361/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/400x107/081/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/50x40/cc3/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/700x500/233/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/300x120/a26/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/341x177/f10/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/164x239/d34/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/200x300/34e/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/175x120/72a/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/210x110/112/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/278x225/644/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/300x120/dc3/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/90x104/b30/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/120x60/bb3/fff" alt="Image alt attr." title="Some image title"/>
    <img src="http://dummyimage.com/140x125/aa3/fff" alt="Image alt attr." title="Some image title"/>
</div>

#images{
    padding:30px;
}
#images img{
    float:left;
    height:100px;
    margin:5px;
    padding:0px;
}
#ibox{
    position:absolute;
    overflow-y:none;
    background:#fff;
    border:1px solid #ccc;
    z-index:1001;
    display:none;
    padding:4px;
    -webkit-box-shadow: 0px 0px 6px 0px #bbb;
    -moz-box-shadow: 0px 0px 6px 0px #bbb;
    box-shadow: 0px 0px 6px 0px #bbb;
}
#ibox img{
    border:1px solid #444;
}
#ibox br{
    clear:both;
}

// ibox image zoomer plugin // roXon

(function($) {
    $.fn.ibox = function() {

        // set zoom ratio //
        resize = 20;
        ////////////////////
        var img = this;
        img.parent().append('<div id="ibox" />');
        var ibox = $('#ibox');
        var elX = 0;
        var elY = 0;

        img.each(function() {
            var el = $(this);

            el.mouseenter(function() {
                ibox.html('');
                var elH = el.height();
                elX = el.position().left - 6; // 6 = CSS#ibox padding+border
                elY = el.position().top - 6;
                var h = el.height();
                var w = el.width();
                var wh;
                checkwh = (h < w) ? (wh = (w / h * resize) / 2) : (wh = (w * resize / h) / 2);

                $(this).clone().prependTo(ibox);
                ibox.css({
                    top: elY + 'px',
                    left: elX + 'px'
                });

                ibox.stop().fadeTo(200, 1, function() {
                    $(this).animate({top: '-='+(resize/2), left:'-='+wh},400).children('img').animate({height:'+='+resize},400);
                });
            });

            ibox.mouseleave(function() {
                ibox.html('').hide();
            });
        });
    };
})(jQuery);

$(document).ready(function() {
    $('#images img').ibox();
});

Sortowanie tablicy wielowymiarowej - PHP

    <?php
    //tablica id|arty|data|rev
    $tabArr[0] = Array(2, 'art', '', 6);
    $tabArr[1] = Array(1, 'art', '', 10);
    $tabArr[2] = Array(2, 'art', '', 6);
    $tabArr[3] = Array(1, 'art', '', 44);
    $tabArr[4] = Array(2, 'art', '', 2);
    $tabArr[5] = Array(1, 'art', '', 0);
    $tabArr[6] = Array(2, 'art', '', 6);
    $tabArr[7] = Array(1, 'art', '', 4);

    //wyswietlenie tablicy
    foreach($tabArr as $row){
    echo '<br />';
    foreach($row as $wynik)
    echo '|'.$wynik;
    }

    //zrobienie pomocniczej tablicy do sortowania
    $i=0;
    foreach($tabArr as $row){
    $i++;
    //nasz rev
    $pomArr[$i] = $row[3];
    }

    //sortowanie
    array_multisort($pomArr, SORT_ASC, $tabArr);
    echo '<br />********************<br />';

    //wyswietlenie posortowanej tablicy
    foreach($tabArr as $row2){
    echo '<br />';
    foreach($row2 as $wynik2)
    echo '|'.$wynik2;
    }
    ?>

wynik:
    |2|art||6
    |1|art||10
    |2|art||6
    |1|art||44
    |2|art||2
    |1|art||0
    |2|art||6
    |1|art||4
    ********************
    |1|art||0
    |2|art||2
    |1|art||4
    |2|art||6
    |2|art||6
    |2|art||6
    |1|art||10
    |1|art||44

Wyśrodkowana zawartość DIV-a w pionie

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>

<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
</div>
</body>
</html>

Podmiana obrazka - JQuery

<div id="photo"><img src="images/slides/1.jpg"></div>
<div id="menu">
            <a href="#" title="1"><img src="images/slides/thumb/1.jpg"></a>
            <a href="#" title="2"><img src="images/slides/thumb/2.jpg"></a>
            <a href="#" title="3"><img src="images/slides/thumb/3.jpg"></a>
            <a href="#" title="4"><img src="images/slides/thumb/4.jpg"></a>
            <a href="#" title="5"><img src="images/slides/thumb/5.jpg"></a>
            <a href="#" title="6"><img src="images/slides/thumb/6.jpg"></a>
            <a href="#" title="7"><img src="images/slides/thumb/7.jpg"></a>
</div>

$(function(){

$("#menu a").click(function(){

$('#photo img').attr('src','images/slides/'+$(this).attr('title')+'.jpg');

return false;

});

Obrazek na pełen ekran | jQuery

http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php

Jquery - zmiana stylu elementów



<div id="nazwa1"></div>


<div id="nazwa2"></div>


<div id="nazwa3"></div>


...itd



<script type="text/javascript">


   var tablica = document.getElementsByClassName('youtube-player');


   for (n in tablica) {


        tablica[n].style.width = '400px';


        tablica[n].style.height = '260px';


     }


</script>

Rozmiar tekstu a rozdzielczość ekranu, Script, PHP, HTML

<p id="tekst">tekst 2</p>

<script>
    document.getElementById('tekst').style.setProperty('font-size',(window.innerHeight*10)/100+'px','')

Pokazanie strony dopiero po załadowaniu wszystkich elemntów

<!-- THREE STEPS TO INSTALL PRELOAD PAGE: 

  1.  Copy the coding into the HEAD of your HTML document 
  2.  Add the onLoad event handler into the BODY tag 
  3.  Put the last coding into the BODY of your HTML document  --> 

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  --> 

<HEAD> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Original:  Gilbert Davis --> 

<!-- This script and many more are available free online at --> 
<!-- The JavaScript Source!! http://javascript.internet.com --> 

<!-- Begin 
function loadImages() { 
if (document.getElementById) {  // DOM3 = IE5, NS6 
document.getElementById('hidepage').style.visibility = 'hidden'; 
} 
else { 
if (document.layers) {  // Netscape 4 
document.hidepage.visibility = 'hidden'; 
} 
else {  // IE 4 
document.all.hidepage.style.visibility = 'hidden'; 
      } 
   } 
} 
//  End --> 
</script> 
</HEAD> 

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  --> 

<BODY OnLoad="loadImages()"> 

<!-- STEP THREE: Copy this code into the BODY of your HTML document  --> 

<div
 id="hidepage" style="position: absolute; left:5px; top:5px; 
background-color: #FFFFCC; layer-background-color: #FFFFCC; height: 
100%; width: 100%;"> 

<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div> 

<!-- put the rest of your page contents here --> 

<p><center> 
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br> 
by <a href="http://javascriptsource.com">The JavaScript Source</a></font> 
</center><p> 

<!-- Script Size:  1.20 KB -->

Jquery - random losowe liczby

PHP - wycinanie znaków "pomiędzy"

function get_between($input, $start, $end)
{
$substr = substr($input, strlen($start)+strpos($input, $start), (strlen($input) - strpos($input, $end))*(-1));
return $substr;
}

$string = "123456789";
$a = "1";
$b = "9";

Zwróci: 2345678

CSS – Dwa divy obok siebie o tej samej wysokości

Dwa divy musimy zamknąć wewnątrz trzeciego który będzie oznaczony id=”glowny” jego styl wygląda następująco:

1
2
3
4
5
6

#glowny {
width: 100%;
clear: both;
height: 100%;
overflow: hidden;
}

Wewnątrz niego będą znajdowały się kolejne dwa o id=tresc oraz id=menu

1
2
3
4
5
6
7
8
9

<div id="glowny">
<div id="menu">
Treść dla menu
</div>

<div id="tresc">
Przykładowa treść dla drugiego diva
</div>
</div>

Teraz wystarczy pokazać style dla div=tresc oraz div=menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#menu {
width: 30%;
margin: 0 0 -20000px 5px;
padding-bottom: 20000px;
height: 100%;
background: #ffe6c5;
float: left;
}
#tresc {
width: 65%;
padding: 0 0 0 15px;
float: left;
height: 100%;
background: #CCCCCC;
margin-bottom: -20000px;
padding-bottom: 20000px;
}

Przykład działa bez problemowo

A jest dostępny pod tym adresem.

Odczytywanie parametrów z adresu WWW

W kodzie PHP dodać linijkę:

na podstawie informacji można szybko stworzyć:

$_SERVER['HTTP_HOST'].''.$_SERVER['REQUEST_URI'];

IT - notepad