Here is a JQuery code snippet to get the clicked div elements's attribute or the value with the similar class names on click function
<script>
$(document).ready(function(){
$('.simg').click(function(){
//var pth = $('.simg').attr('src');
var pth = $(this).attr('src');
console.log(pth);
});
});
</script>
JQuery Detect the browser window top and change CSS on page
JQuery Detect the browser window top and change CSS on page
var t = $("#nav2").offset().top;
$(document).scroll(function() {
if ($(this).scrollTop() > t)
{
$('#nav2').css('position', 'fixed');
$('#nav2').css('top', '0');
}
else
{
$('#nav2').css('position', 'relative');
}
});
var t = $("#nav2").offset().top;
$(document).scroll(function() {
if ($(this).scrollTop() > t)
{
$('#nav2').css('position', 'fixed');
$('#nav2').css('top', '0');
}
else
{
$('#nav2').css('position', 'relative');
}
});
Apache localhost to access on LAN computers
Allow your Apache local host to access in LAN computers for Apache 2.4.x
Find <Directory "c:/wamp/www"> </Directory> in your Apache httpd.conf file and Replace with this code
<Directory "c:/wamp/www">
#
# Possible values for the Options directive are "None", "All",
# or any combination of:
# Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
# Note that "MultiViews" must be named *explicitly* --- "Options All"
# doesn't give it to you.
#
# The Options directive is both complicated and important. Please see
# http://httpd.apache.org/docs/2.4/mod/core.html#options
# for more information.
#
Options Indexes FollowSymLinks
#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# AllowOverride FileInfo AuthConfig Limit
#
AllowOverride All
#
# Controls who can get stuff from this server.
#
# This looks after 127.0.0.1 ::1 and localhost
Require local
# This should be the first 3 quartiles of the standard subnet ipaddress range
Require ip 192.168.0
</Directory>
Find <Directory "c:/wamp/www"> </Directory> in your Apache httpd.conf file and Replace with this code
<Directory "c:/wamp/www">
#
# Possible values for the Options directive are "None", "All",
# or any combination of:
# Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
# Note that "MultiViews" must be named *explicitly* --- "Options All"
# doesn't give it to you.
#
# The Options directive is both complicated and important. Please see
# http://httpd.apache.org/docs/2.4/mod/core.html#options
# for more information.
#
Options Indexes FollowSymLinks
#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# AllowOverride FileInfo AuthConfig Limit
#
AllowOverride All
#
# Controls who can get stuff from this server.
#
# This looks after 127.0.0.1 ::1 and localhost
Require local
# This should be the first 3 quartiles of the standard subnet ipaddress range
Require ip 192.168.0
</Directory>
How to Stop Jquery code running on small screens
Using the IF ELSE statement and CSS media queries you can stop running a JQuery script on a Small screen or a mobile device which has a lowe screen resolution. This will be great to stop Jquery animations on the mobile phones
HTML Code
<div id="mobiledetech"></div>
<!--You can place this HTML somewhere in your HTML page-->
CSS Code
.mobiledetech{
display: block;
}
@media (min-width: 767px) {
.mobiledetech {
display: none;
/* increases the carousel height so it looks good on phones */
}
}
/* This will detect the div tag to diaplay or display none*/
JQUery Code
<script>
//Apllying condition-
$(window).scroll(function() {
if ($(".toggleMenu").css("display") == "none") {
// Jquery code to run
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$(".navbar-default").addClass("navbar-fixed-top slideDown hitebg");
$('.line2').css('display', 'none');
} else {
$(".navbar-default").removeClass("navbar-fixed-top slideDown hitebg");
$('.line2').css('display', 'block');
}
// END
}
});
</script>
// If the div tag is display none the Jquery will run on the page
HTML Code
<div id="mobiledetech"></div>
<!--You can place this HTML somewhere in your HTML page-->
CSS Code
.mobiledetech{
display: block;
}
@media (min-width: 767px) {
.mobiledetech {
display: none;
/* increases the carousel height so it looks good on phones */
}
}
/* This will detect the div tag to diaplay or display none*/
JQUery Code
<script>
//Apllying condition-
$(window).scroll(function() {
if ($(".toggleMenu").css("display") == "none") {
// Jquery code to run
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$(".navbar-default").addClass("navbar-fixed-top slideDown hitebg");
$('.line2').css('display', 'none');
} else {
$(".navbar-default").removeClass("navbar-fixed-top slideDown hitebg");
$('.line2').css('display', 'block');
}
// END
}
});
</script>
// If the div tag is display none the Jquery will run on the page
Subscribe to:
Posts (Atom)