Jquery/Ajax

Downgrade JQUERY version


EzGenerator use latest JQUERY version for both desktop and mobile pages.

If you for any reason need to use older JQUERY version, follow this steps:

 

1. close ezgenerator

2. locate file web.ini in project folder

3. edit this file with notepad, change

 

JQUERY_VER_DESK=1.11.2
JQUERY_VER_MOB=2.1.3

 

to :

JQUERY_VER_DESK=1.8.3
JQUERY_VER_MOB=1.8.3

 

where 1.8.3 is jquery version nr (one of the version numbers here : https://developers.google.com/speed/libraries/devguide#jquery )

 

4. save and start ezg

5. do full build

 

remark: if you build offline project and need to include jquery locally (inside project), use :

JQUERY_VER_DESK=local
JQUERY_VER_MOB=local

 


Print  posted by miro   Jquery/Ajax tags:    permalink
0 0

How to display (another) page inside page


by using jquery/ajax you can put output of any file from your website inside container :

to do this add following code (through insert html)

 

<script type="text/javascript">
$.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}});
</script>

 

 

above code will call documents/myphp.php page and display result inside div with id "output" :

 

 

Some other options available:

 

To make this content load AFTER page is loaded (to speed up the general page load), you can try this:

 

 

<script type="text/javascript">
$(document).ready(function() { $.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}}); });
</script>

 

$(document).ready(... will force the script to be exacuted after page is prepared, so it will not wait for this action to be finished to show the page.

 

To make this content load ON CLICK:

 

 
<script type="text/javascript">
$(document).ready(function() { $("<em><element></em>").click(function(){ $.ajax({url: "documents/myphp.php", success: function(data){$("#output").html(data);}}); }); });
</script>

 

 

 To get only specific element from given page:

 

<script type="text/javascript">
$(document).ready(function(){$.ajax({url: "documents/myphp.php",success: function(data){var dt=$(data).find("<em><element></em>").html(); $("#output").html(dt);}});});
</script>

 

<script type="text/javascript">
$(document).ready(function(){$.ajax({url: "documents/myphp.php",success: function(data){var dt=$(data).find("<em><element></em>").html(); $("#output").html(dt);}});});
</script>

 

<script type="text/javascript">
$(document).ready(function(){$.ajax({url: "documents/myphp.php",success: function(data){var dt=$(data).find("<em><element></em>").html(); $("#output").html(dt);}});});
</script>

 

$("element") can be any normal CSS selector, for example:

  1. $("#output") - this is any element with ID: "output"
  2. $("div #output") - this is DIV with ID: "output"
  3. $(".myClass") - this is any element with class "myClass"
  4. $("input .myClass") - this is an input with class "myClass"

As you can notice - it uses absolutely same element selections as in CSS, so you can check the Internet for more complex selections (by checking CSS or jQuery selector examples).

 

 

 


Print  posted by miro   Jquery/Ajax tags:  Ajax   permalink
3.8 10

Scroll to given element on the page.


 

Some examples about how to scroll to a given page element.

All this code must be wrapped into <script type="text/javascript>custom code stays here</script> tags.

 

Scroll to the element on page load:

 

$(window).load(function() {

$('html, body').animate({ scrollTop: $("<selector>").offset().top},2000);

});

 

Scroll to the element on page ready:

 


$(document).ready(function() {

$('html, body').animate({ scrollTop: $("<selector>").offset().top},2000);

});

 

Scroll to the element on click:

 


$("<selector>").click(function{

$('html, body').animate({ scrollTop: $("<selector>").offset().top},2000);

});

 

2000 - Time in milliseconds (1000 ms = 1 s) that the animation needs to complete. Reduce the amount for quicker and increase for slower motion.

 

More info about the <selector> and how to use it here: JQuery selectors - how to select items on page properly

 

Print  posted by atanas   Jquery/Ajax tags:  javascript • scroll • top   permalink
5 1


[home] 1-3 of 3


CATEGORIES



TAGS


RECENT ENTRIES