So I'm writing a little jQuery plugin but for some reason the plugin method isn't being recognised at all. Can anyone spot where I've gone wrong below
jquery.dimlights.js
(function($) {
var settings = {
opacity : 0.75,
center : false,
}
var screen_width = $(document).width();
var screen_height = $(document).height();
$.fn.dimTheLights = function(options) {
// merge options into settings
options ? $.extend(settings, options) : false;
// add overlay to DOM
$('body').append('<div id="dtl_overlay"></div>');
// resize overlay
$('#dtl_overlay').width(screen_width);
$('#dtl_overlay').height(screen_height);
};
})(jQuery);
index.html
<html>
<head>
<title>Dim The Lights Demo</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../jquery.dimlights.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="../jquery.dimlights.js"></script>
<script>
$(document).ready(function() {
$('#content img').click(function() {
$(this).dimTheLights();
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>Dim The Lights</header>
<section id="content">
<img src="http://placekitten.com/278/100" class="dimthelights" />
</section>
<footer>
<p>© 2011 • Jordan Adams</p>
#JordanCallumA
</footer>
</div>
</body>
</html>
(Then I will put it as an answer ;))
Try window instead of document.
Related
Just recently made this sticky navbar with a little bit of jquery and realised that it doesn't work . When i tried copying my code to jsfiddle everything worked fine
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js\scripts.js"></script>
</head>
<body>
<header onmouseover="this.style.background='white'" onmouseout="this.style.background='#e6e6e6'">
<img src="Photos\logo.png" width="210px" height="150px">
</header>
<ul class="navbar">
<li>Model</li>
</ul>
<div class="main">lots of words......</div
</body>
</html>
And the scripts.js file :
var n=$(".navbar"),
ns="navbar-scrolled",
head=$('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > head) {
n.addClass(ns);
}
else {
n.removeClass(ns);
}
});
The css file is the same as in my JSFiddle
By default JSFiddle runs your script on window load, which means it runs after the DOM has been loaded. You need to do this yourself normally. Just a slight change will fix it...
$(function() {
var n=$(".navbar"),
ns="navbar-scrolled",
head=$('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > head) {
n.addClass(ns);
}
else {
n.removeClass(ns);
}
});
});
You just need to wrap your code like this...
$(function() {
// your code goes here
});
There are other ways to do the same, but that will fix your problem.
I'm working on this template and after including angular in application a lot of functionality is broken. A somehow managed to fix them a lot, but I can not get this slide show to work properly.
This is my HTML
<!doctype html>
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<link rel="icon" type="image/ico" href="images/fav.ico">
<!--stylesheet include-->
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/camera.css">
<link rel="stylesheet" type="text/css" media="all" href="css/owl.carousel.css">
<link rel="stylesheet" type="text/css" media="all" href="css/owl.transitions.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.custom-scrollbar.css">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="css/lightbox.css">
<!--font include-->
<link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="app">
<!--slider-->
<div class="camera_wrap m_bottom_0" ng-controller="slideShowCtrl" ng-show="slideShow()">
<div data-src="images/slide_02.jpg" data-custom-thumb="images/slide_02.jpg">
<div class="camera_caption_1 fadeFromTop t_align_c d_xs_none">
<div class="f_size_large color_light tt_uppercase slider_title_3 m_bottom_5">Meet New Theme</div>
<hr class="slider_divider d_inline_b m_bottom_5">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_45 m_sm_bottom_20"><b>Attractive & Elegant<br>HTML Theme</b></div>
<div class="color_light slider_title_2 m_bottom_45">$<b>15.00</b></div>
Buy Now
</div>
</div>
<div data-src="images/slide_01.jpg" data-custom-thumb="images/slide_01.jpg">
<div class="camera_caption_2 fadeIn t_align_c d_xs_none">
<div class="f_size_large tt_uppercase slider_title_3 scheme_color">New arrivals</div>
<hr class="slider_divider type_2 m_bottom_5 d_inline_b">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_65 m_sm_bottom_20"><b><span class="scheme_color">Spring/Summer 2014</span><br><span class="color_dark">Ready-To-Wear</span></b></div>
View Collection
</div>
</div>
<div data-src="images/slide_03.jpg" data-custom-thumb="images/slide_03.jpg">
<div class="camera_caption_3 fadeFromTop t_align_c d_xs_none">
<img src="images/slider_layer_img.png" alt="" class="m_bottom_5">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_60 m_sm_bottom_20"><b class="color_dark">up to 70% off</b></div>
Shop Now
</div>
</div>
</div>
<div ng-view></div>
<!--scripts include-->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/retina.js"></script>
<script src="js/camera.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.custom-scrollbar.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-ui.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/sortable.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers.js"></script>
<script src="app/factory.js"></script>
<script src="app/filters.js"></script>
</body>
</html>
My controller
controllers.slideShowCtrl = function($scope, $location){
$scope.slideShow = function(){
if($location.url() == '/' || $location.url() == '/home'){
$scope.slideShowView = true;
return true;
}else{
$scope.slideShowView = false;
return false;
}
}
}
And this is jQuery for creating slideshow
// camera slideshow
(function(){
var cs = $('.camera_wrap');
if(cs.length){
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
})();
The problem is here. On first load or reload (f5), slider looks ok and plays well.
After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self.
And again after refreshing web page slider works ok and plays well.
If you guys need any additional chunk of code, let me know and I will provide.
Thank you
Theorically when you put a JQ slideshow in angular view. You need to init everytime you access the view. Because on view/route changes your slideshow will be discarded from DOM, therefore all the content and instance of your slideshow will be discarded too.
The problem is here. On first load or reload (f5), slider looks ok and plays well.
Yes it should work because slideshow got initial welly
After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self.
The slide does not initial properly because it got discard from DOM when route/view changes
=> To make to work just simply re-init it again exactly after your view rendered.
// This is a dirty patch up, and only showing the fix in most basic way. So you could understand the concept of angular with other DOM manipulation like JQ.
// You should try to study more about DOM manipulation in angular. And for better solution, you can go with directive
controllers.slideShowCtrl = function($scope, $location, $timeout){
$scope.slideShow = function(){
if($location.url() == '/' || $location.url() == '/home'){
$scope.slideShowView = true;
return true;
}else{
$scope.slideShowView = false;
return false;
}
// I just putting slideshow initial right after $scope.slideShow() return true.
// To make sure slideshow got initial after the ng-show condition return true.
$scope.$watch(function () {
return $scope.slideShow();
}, function (isShow) {
// This $timeout to 100% sure slideshow initial only happen after view got all its base content rendered
$timeout(function () {
if(isShow){
var cs = $('.camera_wrap');
if(cs.length){
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
}
}, 0)
})
}
}
P.S.
please aware that, since we do not have any fiddle/plunker so to make sure the solution work, I apply some tricks that will put the highest possiblity for my answer to providing a workding code. You can try to remove $timeout to see if it worked
I think creating a directive for slideshow can solve this problem.
I have faced this type of problem with swiper slider. After create directive solve my problem.
your directive
angular.module('app', [])
.directive('cameraSlider', function($timeout){
return {
restrict: 'AC',
templateUrl: function(element, attrs) {
return attrs.templateUrl | 'your_remplate_url.html';
}
link: function($scope, element, attrs){
$timeout(function(){
element.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
element.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
element.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
},200)
}
};
})
now you can use camera-slider class with camera-wrap class
I need to rotate and move an image at the same time, actually works just one time, but then just move and not rotating.
This is what i have:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain(){
$(".cartman").hover(MoveCartman,Normal); //on hover Eric Cartman
var v1=100; //variable to move Cartman
function MoveCartman(){
$(this).attr("src","CartmanNude.png");
$(this).css({
"margin-top":v1+"px",
"transform":"rotateZ(-360deg)",
"transition":"1s"
});
if (v1<200){v1+=100;}
else {v1=0;}
}
function Normal(){
$(this).attr("src","CartmanNormal.png");
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="CartmanNormal.png">
</div>
</div>
</div>
</body>
</html>
I think this should work fine but I dont know why the function on hover is not working more than just 1 time.
Sorry for my bad english and thanks.
Try substituting lowercase d for D at doctype declaration , adding all to transition value before duration ; css "margin-top": "0px" , "transform": "rotateZ(0deg)" to Normal function
.cartman {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain() {
$(".cartman").hover(MoveCartman, Normal); //on hover Eric Cartman
var v1 = 100; //variable to move Cartman
function MoveCartman() {
$(this).attr("src", "http://lorempixel.com/100/100/cats");
$(this).css({
"margin-top": v1 + "px",
"transform": "rotateZ(-360deg)"
});
if (v1 < 200) {
v1 += 100;
} else {
v1 = 0;
}
}
function Normal() {
$(this).attr("src", "http://lorempixel.com/100/100/technics")
.css({
"margin-top": "0px",
"transform": "rotateZ(0deg)"
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
</div>
</div>
</div>
</body>
</html>
I am using this javascript from this link.
I have created a new div element in javascript using the following code
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
value= VALUE_FROM_DB.split("||");
for (k=0;k<value.length;k++)
{
if (value[0] == paramName1)
{
return unescape(value[k]);
console.log("no of swipe views ");
}
var val = k+1;
var superdiv = document.getElementById('swiper-wrapper');
var newdiv = document.createElement('div');
var divIdName = 'swiper-slide'+val;
console.log("div name: "+divIdName);
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('class','swiper-slide');
newdiv.style.width = "25%";
newdiv.style.height = "30%";
superdiv.appendChild(newdiv);
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}
html code
<div id="swipe_body">
<div class="swiper-container swiper-threshold">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
</div>
</div>
css code:
.clinical
{
font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
width:auto; height:30%; display:block; overflow:hidden;float:left;
}
the output comes like this
but i would like to get it like this
on swiping i should get it like this
Please suggest me ways to solve this problem..
EDIT: I have given the following code after the style and before javascript.
</style>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-demos.css" />
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
<script type="text/javascript" charset="utf-8">
EDIT 2:
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
document.querySelector('.swiper-container');
i added this document.querySelector('.swiper-container'); as well as
function onDeviceReady()
{ var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',loop: true
});
The only improvement is that only the 1st slide is there, it's not swiping.
There is no Jquery in your code but only native javascript.
I recommend you to give a look at this plugin.http://plugins.jquery.com/jcarousel/
This is a jquery Carousel. I already used it and it's simple, well documented and flexible.
Click "view homepage" on the top right corner and check demos in the developper's page.
EDIT here a sample code using JCarousel to help you :
<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
<html>
<body>
<div id="swipe_body">
<div class="swiper-container swiper-threshold" id="mycarousel">
<div class="swiper-wrapper" id="swiper-wrapper">
<div id="container1" class="container"><span><img...</span></div>';
<div id="container2" class="container"><span><img...</span></div>';
<div id="container3" class="container"><span><img...</span></div>';
... ...
</div>
</div>
</div>
</body>
</html>
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// optional configuration goes here
});
});
</script>
As you can see, only 2 line of jquery to get this.
You can download jquery.jcarousel.min.js at the url given above. Just create your several conteners with the data from the server. Remember, avoid giving same id to differents elements
for (k=0;k<value.length;k++){
...
var cnt1 = '<div id="container" cla
...
They will all have the same id.
I have a design in mind that involves a split panel view in html, similar to a winforms split panel. I've been expirimenting with jQuery UI - Resizable and I like the function, I just can't seem to co-ordinate the resizing of the two divs. The problem with the current code is that the two divs resize away from each other, not with one following the other. How can I make the two divs work together?
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
<script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
// initialise plugins
$(function(){
try {
$('ul.sf-menu').superfish();
//set up divs
$('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
}catch(ex){
alert(ex.message);
}
});
</script>
</head>
<body>
<div id="Header">
<div id="Menu">
<ul class="sf-menu" id="nav">
<!-- Snip menu -->
</ul>
</div>
</div>
<div id="Middle">
<div id="Content" class="ui-widget-content">This is where the view is.<br/>
Imagine an image here ...
<br/>
<br/>
<br/>
</div>
<div id="Attributes" class="ui-widget-content">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div id="FootBreak"/>
<div id="Footer">
Help
</div>
</body>
</html>
I have worked out a reasonable hack, using the resize event.
<script type="text/javascript">
var WIDTH_ATTR = 'initWidth';
// initialise plugins
$(function(){
try {
$('#Content').resizable({ handles: 'e', resize: resizeAttr });
$('#Content').attr(WIDTH_ATTR, $('#Content').width());
$('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
}catch(ex){
alert(ex.message);
}
});
function resizeAttr(event, ui){
var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
$('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
};
</script>
I'm still open to cleaner answers from others...
I am not sure if this meets the requirements, but ExtJS handles split panes with ease and works cross-browser. For example, see this RSS feed client in ExtJS. Be aware the ExtJS has commercial licensing restrictions if your intent is to sell your product.
Here is an example with a horizontal split (one top div, one bottom div), maybe slightly more minimalistic:
HTML:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="div1">1st</div>
<div id="div2">2nd</div>
</body>
</html>
CSS:
#div1, #div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* just for making the divs visible */
margin: 5px; /* just for making the divs visible */
}
#div1 {
height: 100px;
top: 0;
}
#div2 {
top: 110px;
bottom: 0;
}
JavaScript:
$('#div1').resizable({
handles: 's',
resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
var new_height = ui.size.height;
$('#div2').css('top', new_height + 10);
}
See demo here.