Tag: javascript

Pubblicato il

how to pass a php variable to javascript

You can use a code like the following:

<?php 
  $name= "Hello World";
?> 
<script type="text/javascript"> 
  var x = "<?php echo "$name"?>";      
  document.write(x);    
</script>

and then insert this code in a php page: but not with a js extension, but with some like inc

Pubblicato il

open link inside a ‘details’ element

‘Details’ html tag is a very easy way to collapse/expand a web content: you can see it in the following example. This is the code:

<details>
<summary>expansible title</summary>
<p>all the content you want: text, images, video, in a nutshell: all possible content</p>
</details>

and this is the result:

expansible title

all the content you want: text, images, video, in a nutshell: all possible content

But there is a problem: the collapsed content is not reachable unless you click over his ‘summary’ (in the example above: ‘expansible title’) . Therefore a link from outside the details content toward some element inside that, doesn’t work, because it cannot open it.

To fix this problem you can use a little javascript:

  const openDetailsIfAnchorHidden = evt => {
  const targetDIV = document.querySelector(evt.target.getAttribute("href"));
  if ( !! targetDIV.offsetHeight || targetDIV.getClientRects().length ) return;
  targetDIV.closest("details").open = true;
 }

 [...document.querySelectorAll("[href^='#']")].forEach( 
   el => el.addEventListener("click", openDetailsIfAnchorHidden )
 );

to be put at the bottom of a page (otherwise it doesn’t work).

Pubblicato il

on-click expansible image

We were looking for the simplest possible solution to enlarge an image on click, without javascript and with the least amount of code possible.

a first attempt

At first we found the pseudo-class focus as a solution: with this css code img:focus and in html (inside the img tag) tabindex="0".

In this way, the image expanded on click, but to make it return to the initial size, it was necessary to click outside the enlarged image. As in the following example:

an important step

Therefore we had to add other code, so that we could return to the original, small, size, clicking inside the image. We had to use the input tag.

This is the result:

This is the code:

<style type="text/css">
input:checked + label > img {max-width: 200px; transform:scale(1.0); left: 0px;}
input {display: none;}
img {
    max-width: 200px;
    transition: all 1s;
    transition:transform 0.25s ease;
}

img:focus {
    max-width: none;
    transform:scale(2.8);
    position: relative;
    left: 5%;
    outline:0;
}
</style>
<p>This the result:</p>
<input type="checkbox" checked id="myimage" />
<label for="myimage">
<img tabindex="0" src="path-to-my-image/myimage.jpg" width="200px" />
</label>

fine tuning: adding an image map

We speak about this new feature in another article.

Pubblicato il

show “alt” attribute after an image

You can use a javascript, like this

<script type="text/javascript">
// img[style]').each(function(){
       $el = $(this);
       var style = $el.attr('style');
       $el.attr('style','');
       $el.parent().attr('style',style);
    }); //Moves the inline styles

      $("img").each(function(){
          var title = this.alt;
          $(this).after(''+ title +'');
      }); //Adds the dynamic captions.
 });
 //]]>
</script>

Pubblicato il

formattazione condizionale css

Parliamo di tag html e di css. Voglio che se un p comincia con uno span non venga applicata una certa regola (nella fattispecie “aperte virgolette”). In effetti creo una pagina php con citazioni di autori e capita che un certo item cominci non con le parole dell’autore, ma con una mia introduzione.
Non è possibile agire a livello di puro css, col selettore :not (nella fattispecie :not(p > span): non viene riconosciuto.
Allora bisogna usare jquery

  • collegare la pagina php a jquery su web (<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”></script>)
  • creare una classe css, nel mio caso: .noquote (metto l’intero codice: “blockquote p.noquote:first-child:before {content:none;}”
  • inserire lo script: “<script type=”text/javascript”>
    $( “p:has(> span)” ).addClass( “noquote” );
    </script>”

E il gioco è fatto!

Pubblicato il

disbilitare il tasto destro del mouse

Cioè il menu contestuale. Si deve ricorrere a un javascript, ovviamente all’interno del tag script, da collocarsi all’interno del body:
function nrcIE(){
if (document.all){return false;}}
function nrcNS(e){
if(document.layers||(document.getElementById&&!document.all)){
if (e.which==2||e.which==3){
return false;}}}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=nrcNS;
}else{document.onmouseup=nrcNS;document.oncontextmenu=nrcIE;}
document.oncontextmenu=new Function(“return false”);

Pubblicato il

expand-collapse: quante difficoltà

Non è facile trovare uno script (js) per una funzione pur semplice come expand/collapse.
O meglio, se ne trovano, ma non adattabili tanto facilmente alla scelta di visualizzare di default alcuni blocchi comprimibili (o uno solo), lasciando compressi e non visibili, se non dopo clic, gli altri.
Tale funzione è utile per un menu: con espanso solo il blocco di links che si riferisce alla sezione in cui ci si trova, e compressi i links alle singola pagine delle altre sezioni del sito.
Molti script naufragano sull’unico clic, ne vogliono due la prima volta e solo poi si accontentano di uno; viceversa altri sono scattanti da subito al primo clic, ma comprimono tutti i blocchi, compreso quello che dovrebbe restare espanso.
Finora non ho trovato uno script che abbia entrambi i pregi: bisogna scelgleiere l’uno, o l’altro.