jquery slider not working - javascript

I am appending images dynamically and then loading the jQuery file for slider, but problem is iamges are appearing but slider not working.
HTML code :-
<div id="banner-fade">
<ul class="bjqs" id="gallerySlider">
</ul>
</div>
<script src="assets/js/slider.js"></script>
<script class="secret-source">
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
animtype : 'slide',
height : 320,
width : 620,
responsive : true,
animspeed:2000
});
});
</script>
<script src="assets/js/upcomingEventLoader.js"></script>
error are coming in slider.js
Uncaught TypeError: Cannot read property 'css' of null
e(window).resize(function() {
m.width=i.outerWidth(), m.ratio=m.width/r.width, m.height=r.height*m.ratio;
o.css( {
height: m.height, width: m.width
}
);
o.children("img").css( {
height: m.height, width: m.width
}
);
s.css( {
height: m.height, width: m.width*r.slidecount
}
);
i.css( {
height: m.height
}
);
h.css( {
height: m.height, width: m.width
}
);
w(function() {
O(!1, v.currentslide)
}
, 200, "some unique string")
}
Error at h.css line

Related

Uncaught TypeError: Cannot read property 'opacity' of undefined

I want to make a div transparent. This code was working in javascirpt but now I converted it to JQuery for learning purpose but I get:
Error : Uncaught TypeError: Cannot read property 'opacity' of undefined
$(document).ready(function(){
$("#addtask").click( function() {
if ($("#taskinput").style.opacity == "100") {
$("#taskinput").style.opacity = "0";
}
else if ($("#taskinput").style.opacity == "0") {
$("#taskinput").style.opacity = "100";
}
});
});
#taskinput {
background-color: red;
height: 200px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>
<div id="taskinput">
</div>
I am not quite sure what is wrong.
Try this
$(document).ready(function(){
$("#addtask").click( function() {
var opacity = $("#taskinput").css("opacity");
console.log("opacity", opacity);
if (opacity > 0) {
$("#taskinput").css("opacity", 0);
}
else if (opacity == 0) {
$("#taskinput").css("opacity", 1);
}
});
});
#taskinput {
background-color: red;
height: 200px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>
<div id="taskinput">
</div>
You need to use jQuery methods on your jQuery objects instead of the DOM properties you were using before.
Instead of:
$("#taskinput").style.opacity = "0";
Use:
$("#taskinput").css('opacity', 0);
You're doing a load of things incorrectly here. Most importantly, you can accomplish what you want with just $("#taskinput").toggle();.
What you had gotten wrong was:
You were trying to apply native JavaScript methods on jQuery objects when you were doing $("#taskinput").style.opacity. You can use this as long as you dereference the object since each jQuery object also masquerades as an array. You can do that via $("#taskinput")[0] or $("#taskinput").get(0)
The opacity property values range from 0 to 1, not 0 to 100.
You were comparing numbers and strings.
So again, just use .toggle() to do what you wanted to do:
$(document).ready(function() {
$("#addtask").click(function() {
$("#taskinput").toggle();
});
});
#taskinput {
background-color: red;
height: 200px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>
<div id="taskinput">
</div>
You are modifying DOM properties on jQuery objects and opacity goes from 0 to 1, not from 1 to 100
If you just want to show or hide, use .toggle
$("#taskinput").toggle();
To use opacity, try
$(document).ready(function() {
$("#addtask").click(function() {
var opc = $("#taskinput").css("opacity");
$("#taskinput").css("opacity", opc < 1? 1: 0.5);
});
});
#taskinput {
background-color: red;
height: 200px;
width: 200px;
opacity:0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>
<div id="taskinput">
Hello
</div>
"Uncaught TypeError: Cannot read property 'opacity' of undefined"
The error message shows since you're trying to call the style that is an attribute of DOM object on jQuery object, you could always return DOM object instead using [0] like :
$("#taskinput")[0].style.opacity = "0";
But since you're using jQuery it will be better to use the jQuery method .css() instead :
$("#taskinput").css("opacity", 0);
NOTE : opacity should be between 0 and 1, 100 isn't a valid value of this property.
$(document).ready(function() {
$("#addtask").click(function() {
var input = $("#taskinput");
var opacity = input.css('opacity');
if (opacity == 1) {
input.css('opacity', 0);
} else if (opacity == 0) {
input.css('opacity', 1);
}
});
});
#taskinput {
background-color: red;
height: 200px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>
<div id="taskinput"></div>

Javascript dialog auto heigth not work correctly

i wrote this code in cshtml to create a container for my pdf viewer modal:
<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
<iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>
and my js is:
function PopupPDF() {
$('#form_modal_PDF').dialog({
open: function () {
$(this).closest(".ui-dialog")
.find(".ui-button-text")
.removeClass("ui-button-text");
}
, autoOpen: false
, modal: true
, draggable: false
, resizable: false
, show: 'slide'
, hide: 'drop'
, width: '80%'
, height: 'auto'
, beforeClose: function () {
$('#form_load_PDF').attr('src', 'about:blank');
}
});
$('#form_modal_PDF').dialog('open');
$('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}
But my dialog pdf viewer in height deals only 10% of my screen
Thanks
You need change iframe code like this
<iframe id="form_load_PDF" class="IframeDialog" frameborder="1" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>
Here's how you can calculate the height with javascript:
$(document).ready(function() {
PopupPDF();
});
function PopupPDF() {
$('#form_modal_PDF').dialog({
open: function () {
$(this).closest(".ui-dialog")
.find(".ui-button-text")
.removeClass("ui-button-text");
}
, autoOpen: false
, modal: true
, draggable: false
, resizable: false
, show: 'slide'
, hide: 'drop'
, width: '80%'
, height: $('body').height() * 0.6
, beforeClose: function () {
$('#form_load_PDF').attr('src', 'about:blank');
}
});
$('#form_modal_PDF').dialog('open');
$('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}
html, body {
height: 100%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
<iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>
It's done with $('body').height() * 0.6. Just change it to the percentage you want (and replace "body" with the actual container of the "form_modal_PDF" div).

Flexslider fullscreen is not centered in mobile

I have this fullscreen background that I'm using and it works correctly on my laptop and big screens. The problem is when I enter the website from a mobile device. The background image (and the buttons above it) move to the side. I do not know why is this. I think it has to be with the bootstrap.min.
The HTML:
<!-- Intro Section -->
<section id="intro">
<!-- Hero Slider Section -->
<div class="flexslider fullscreen-carousel hero-slider-1 ">
<ul class="slides">
<!--Slide-->
<li data-slide="dark-slide">
<div class="slide-bg-image overlay-light dark-bg parallax" data-background-img="images/connexion_background.jpg">
<div class="js-Slide-fullscreen-height container">
<div class="intro-content">
<div class="intro-content-inner">
<br />
<div><a class="btn btn-md btn-white" href="contact.php">Request a Quote</a><span class="btn-space-10"></span><a class="btn btn-md btn-white " href="research-solutions.html">View Our Solutions</a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- End Hero Slider Section -->
</section>
<div class="clearfix"></div>
<!-- End Intro Section -->
The JS:
var pageSection = $('.slide-bg-image, .bg-image');
pageSection.each(function (indx) {
if ($(this).attr("data-background-img")) {
$(this).css("background-image", "url(" + $(this).data("background-img") + ")");
}
});
function fullScreenSlider() {
if ($('.fullscreen-carousel').length > 0) {
$('.fullscreen-carousel').flexslider({
animation: "slide",
// startAt: 0,
animationSpeed: 700,
animationLoop: true,
slideshow: true,
easing: "swing",
controlNav: false,
before: function (slider) {
//Slide Caption Animate
$('.fullscreen-carousel .intro-content-inner').fadeOut().animate({ top: '80px' }, { queue: false, easing: 'easeOutQuad', duration: 700 });
slider.slides.eq(slider.currentSlide).delay(400);
slider.slides.eq(slider.animatingTo).delay(400);
},
after: function (slider) {
//Slide Caption Animate
$('.fullscreen-carousel .flex-active-slide').find('.intro-content-inner').fadeIn(2000).animate({ top: '0' }, { queue: false, easing: 'easeOutQuad', duration: 1200 });
// Header Dark Light
headerDarkLight_with_flexslider();
},
start: function (slider) {
$('body').removeClass('loading');
// Header Dark Light
headerDarkLight_with_flexslider();
},
useCSS: true,
});
};
// Header Dark Light
function headerDarkLight_with_flexslider() {
var color = $('.fullscreen-carousel').find('li.flex-active-slide').attr('data-slide');
if (color == 'dark-slide') {
$('#header').addClass('header').removeClass('header-light');
$('#header').removeClass('header-default');
}
if (color == 'light-slide') {
$('#header').addClass('header-light').removeClass('header-dark');
$('#header').removeClass('header-default');
}
if (color == 'default-slide') {
$('#header').removeClass('header-dark');
$('#header').removeClass('header-light');
$('#header').addClass('header');
}
};
// "fullscreen-carousel" height
fullScreenCarousel();
function fullScreenCarousel() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if ($(window).width() > 767) {
$('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", windowHeight);
}
else {
$('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", '400px');
}
};
$(window).resize(function () {
fullScreenCarousel();
});
};
This is the result in mobile:
The buttons and the background image are moved to the right. They are not centered and the background picture repeat itself.
I can see this on the development tool of Mozilla:
Any help would be appreciated.
Thank you.
center the images in your slides add this in your css
.flexslider img { margin: 0 auto; }
OR
.flexslider .slides > li{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
can you try to add following css at last of the css document
.flexslider ul.slides {
padding: 0 !important;
}
Your flex slider left position is not right , You can simply fix this with left property, try with the below code
.fullscreen-carousel .slides li {
height: 100%;
left: -40px; /* newly added */
overflow: hidden;
position: relative;
}
can you try this also , remove the left:-40px and add this jquery to the page
$(window).load(function() {
$('.flexslider').flexslider();
$(window).trigger('resize');
});

How to onload <div> to run automatically when page start loading?

My code works well but when i refresh my page, both <div> run together whereas i need only one when each radio button is clicked.
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
$(document).ready(function () {
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
});
<div id="a">
<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
<div id="b">
<div id="Revenue2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
and here's my graph code. Revenue and revenue2 basically a graph that will alternately shown when radio button is clicked. so basically both code are the same with different data only.
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'Revenue2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Revenue'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Revenue (RM)'
}
},
plotOptions: {
column: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name;
}
}
}
},
series: [{
type: 'column',
name: 'Revenue',
data: []
}]
}
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
Try hiding one of the divs on document load:
EDIT:
I'm not super familiar with the HighCharts API, but it looks like there is a callback in the constructor that will allow you to do something after the chart is done loading. In this case, I hide the chart after it has finished loading.
$(document).ready(function() {
$(".css-checkbox").click(function() {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
var options1 = {
//removed for brevity;
}
var options2 = {
//removed for brevity;
}
//get chart1
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options1);
});
//get chart2
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options2, function() {
//hide chart after it has been loaded
$("#b").hide();
});
});
});
Since you are dealing with something filling the contents while potentially hidden, you might set the div off screen rather than display: none;.
function setOnScreen(id){
var $a = $("#a");
var $b = $("#b");
var $hide = (id === "one" ? $a : $b);
var className = "offscreen";
$a.addClass(className);
$b.addClass(className);
$hide.removeClass(className);
}
$(document).ready(function () {
setOnScreen($(".css-checkbox[checked]").attr("id"));
$(".css-checkbox").click(function () { setOnScreen($(this).attr("id")); });
});
#a { background-color: aliceblue; border: solid 1px; }
#b { background-color: mistyrose; border: solid 1px; }
.offscreen {
position: absolute;
left: -10000px;
}
<div id="a" class="offscreen">
<div id="Revenue" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<div id="b" class="offscreen">
<div id="Revenue2" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Why are images duplicated with append()?

When a "project" is clicked, I want multiple images to be appended to a container element.
Projects and their image URLs are defined in a JavaScript object.
If I click a project, its images are correctly appended. But if I close the project viewer and click that project again, the images are all duplicated. I think this has something to do with append().
What am I doing wrong?
I made a demonstration below:
$(function() {
var projects = {
'project_1': {
'title': 'EduTravel For Credit',
'description': 'Innovative travel for credit.',
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
$.each(projectData.images, function(item) {
$('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
});
$('#project_images').html('');
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="project-images"></div>
View the live website
From the source code on your website, it seems that you might be attempting to remove images from the container before appending new images:
$('#project_images').html('');
However, that selector uses an underscore while the actual element uses a hyphen:
<div id="project-images">
Also, you are clearing the contents after appending images rather than before.
I suggest using jQuery's empty() on the container before appending new images:
$(function() {
var projects = {
'project_1': {
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
},
'project_2': {
'images': [
'http://lorempixel.com/400/30/abstract/3/',
'http://lorempixel.com/400/30/abstract/4/'
]
},
'project_3': {
'images': [
'http://lorempixel.com/400/30/abstract/5/',
'http://lorempixel.com/400/30/abstract/6/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
var id=jQuery(this).data('id'),
projectData=projects["project_"+id];
$('#project-images').empty();
$.each(projectData.images, function(item) {
$('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
});
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>
<div id="project-images"></div>
An alternate method is to concatenate a string of new images, and then set the HTML of the container without using append():
$(function() {
var projects = {
'project_1': {
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
},
'project_2': {
'images': [
'http://lorempixel.com/400/30/abstract/3/',
'http://lorempixel.com/400/30/abstract/4/'
]
},
'project_3': {
'images': [
'http://lorempixel.com/400/30/abstract/5/',
'http://lorempixel.com/400/30/abstract/6/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
var id=jQuery(this).data('id'),
projectData=projects["project_"+id],
html_string='';
$.each(projectData.images, function(item) {
html_string+='<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>';
});
$('#project-images').html(html_string);
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>
<div id="project-images"></div>

Categories

Resources