internet explorer 11 not loading stylesheet - javascript

This is my <head> section that is loading my CSS files without problem on FF and chrome.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
<meta name="description" content="">
<link rel="shortcut icon" href="http://www.es-processing.com/static/images/favicon.ico" type="image/x-icon">
<script src="index_files/core.js" type="text/javascript"></script>
<script>$(function() {
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 1100,
timeout: 6000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
// using the "before" function, we grab the content of the active slide and show it in our custom box overlay
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
});</script>
<script type="text/javascript" src="index_files/jquery.js"></script>
<script src="index_files/generic.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var slideInterval=20000;
var slideTransition=3500;
var slideArray=["index_files/background1.jpg","index_files/background2.jpg","index_files/background3.jpg"];
jQuery.fx.interval=33;
// -->
</script>
<link href="index_files/main.css" rel="stylesheet" type="text/css">
<link href="index_files/16204.css" type="text/css" rel="stylesheet">
</head>
The "main.css" isn't loading at all in IE although in previous version of my website it worked fine. However, if i edit the line
<link href="index_files/main.css" rel="stylesheet" type="text/css">
in IE11 developper tool, and rewrite "main.css" and pressed enter, my page will be styled again in IE. Is there a way to force IE to execute the "main.css" line?

Related

i am using a slider but when i code it. tooltip is not moving and hover is also not working

I am using this website https://www.jqueryscript.net/demo/Highly-Customizable-Range-Slider-Plugin-For-Bootstrap-Bootstrap-Slider/ for slider and i am using Custom tick marks slider but the tooltip is not working i can't understand what went wrong with tooltip. i have copied the bootstrap-slider.css from dist folder css and bootstrap-slider.js from dist but still the tooltip is not working
//html code
<html lang="en">
<head>
<title>Comment</title>
<meta charset="utf-8">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -->
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/bootstrap-slider.css" rel="stylesheet">
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap-slider.js"></script>
</head>
<body>
<div class="ranges">
<input id="test" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>
</div>
<!-- <script src="js/script.js"></script> -->
<script>
$("#test").slider({
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
</script>
</body>
</html>
Try replace this:
to this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js" integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" integrity="sha512-3q8fi8M0VS+X/3n64Ndpp6Bit7oXSiyCnzmlx6IDBLGlY5euFySyJ46RUlqIVs0DPCGOypqP8IRk/EyPvU28mQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
If it's working, means the problem is the file's path.
bootstrap-slider
demo site slider version is 6.0.4 and it's outdated
recent version is 11 and it support only bootstrap 4
more information: https://github.com/seiyria/bootstrap-slider

Progress bar for upload not working again for Jquery/Javascript

I recently discovered that my upload for an already existing php, Javascript, jQuery, bootstrap application stopped working. I have been trying to resolve this issue for over a week now. On the javascript console I am getting this error
: main.js:604 Uncaught TypeError: $(...).clipresize is not a function. Please any assistance will be of great assistance. I was thinking that the many references to various Jquery files could be causing this error or is it that all browsers have been recently upgraded not to support some snippets being referenced. I am confused.
The application codes are below:
add.php
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]--><!-- start: HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<!-- start: META -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description">
<meta content="" name="author">
<!-- end: META -->
<!-- start: MAIN CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/fonts/style.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/main-responsive.css">
<!--<link rel="stylesheet" href="../css/all.css">-->
<link rel="stylesheet" href="../css/bootstrap-colorpalette.css">
<link rel="stylesheet" href="../css/perfect-scrollbar.css">
<link rel="stylesheet" href="../css/theme_light.css" type="text/css"
id="skin_color">
<link rel="stylesheet" href="../css/print.css" type="text/css"
media="print">
<link href="../css/bootstrap-modal-bs3patch.css" rel="stylesheet"
type="text/css">
<link href="../css/bootstrap-modal.css" rel="stylesheet" type="text/css">
<link href="../css/validate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-
16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-hover-dropdown.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="../js/jquery.icheck.min.js"></script>
<script src="../js/jquery.mousewheel.js"></script>
<script src="../js/perfect-scrollbar.js"></script>
<script src="../js/less-1.5.0.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/bootstrap-colorpalette.js"></script>
<script src="../js/main.js"></script>
<script src="../js/index.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-modalmanager.js"></script>
<script src="../js/validations.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="../js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="../js/jquery.maskMoney.js"></script>
<script src="../js/form-elements.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
UIModals.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Index.init();
});
</script>
.......
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.form.min.js" type="text/javascript"></script>
<script src="materialize.js" type="text/javascript"></script>
<link rel="stylesheet" href="materialize.css">
.................
<script type="text/javascript">
$(document).ready(function() {
$('#add_app').submit(function(e) {
var value = manage_form();
if(value==false)
{
return false;
}else{
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({
//target: '#targetLayer',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total,
percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' +
percentComplete +' %</div>')
},
success:function (data){
$('#modal1').openModal();
$('#loader-icon').hide();
$("#progress-bar").width('0%');
var res = data.split("~");
$('#mode7').html('<a href="add.php?flag=edit&id='+res[1]+'"
class="btn light-green modal-action modal-close waves-effect waves-
green btn-flat">Okay</a>');
document.getElementById('row_id').value = res[1];
document.getElementById('row1_id').value = res[1];
document.getElementById('package').value = res[0];
//document.getElementById('process_id').html = data;
//$('#mode7').html('<a href="add.php?
flag=edit&id='+res[1]+'" class="btn light-green modal-action modal-close
waves-effect waves-green btn-flat">Okay</a>');
},
resetForm: true
});
return false;
}
});
});
and the "main.js" script that throws the error is below:
//Window Resize Function
var runWIndowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
runElementsPosition();
});
};
I finally was able to get my progress bar working and all the assets uploaded to the required folder by removing a mailing library called Php Mailer in my php submit script. The Php mailer library was failing in my application and I discovered that it was throwing up a blank or null output which was causing my application to break by not responding to the submit button. And broken libraries at times are the reason for which many formerly functioning web applications are said to stop functioning. The solution many times will be to update the required libraries or to remove them and find a way to tweak the application to work without those libraries. Thanks

Slideshow is not working correctly

I am working with jquery mobile and decided to use a diashow for pictures. The thing is that the slideshow only works when I am loading the page for a second time.
I am new to jquery mobile and don't quite know how to fix it.
I used the slider from http://www.idangero.us/swiper/#.VsMVPua6nVI
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Slideshow only works by refreshing the page.
<link rel="stylesheet" type="text/css" href="Swiper-master/dist/css/swiper.min.css">
<script type="text/javascript" src="Swiper-master/dist/js/swiper.min.js"></script>
<link rel="stylesheet" type="text/css" href="slidshow.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="Swiper-master/dist/js/swiper.jquery.js"></script>
<script>
$(document).ready(function diashow() {
var swiper = new Swiper('.swiper-container',
{
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true
})
});
</script>
</head>

javascript runtime error object doesn't support property or method 'tabs'

Whenever i load my page this error got hit.
My code is:
<head runat="server">
<title>Jai Jinendera</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/selectivizr-min.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css">
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/all-in-one-min.js"></script>
<script src="js/setup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel.js" type="text/javascript">
$(window).load(function () {
$('.flexslider').flexslider();
});
$(function () {
$('#work').carouFredSel({
width: '100%',
scroll: 1,
auto: false,
pagination: false,
prev: '.prev_item',
next: '.next_item'
});
$("#work").touchwipe({
wipeLeft: function () { $('.next_item').trigger('click'); },
wipeRight: function () { $('.prev_item').trigger('click'); }
});
});
$(window).load(function(){
$('#demo-side-bar').removeAttr('style');
});
</script>
<style type="text/css">
.demobar {
display:none;
}
#demo-side-bar {
top:53px!important;
left:90%!important;
display:block!important;
}
</style>
</head>
It says error in client/js/setup.js-line 10 column 5
and 10th line of setup.js is
$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast'} });
I see two problems in your <script> declarations:
You have included jquery.min.js twice, once from a location on your server and once from Google's CDN. Remove the latter. (Or remove the former and move the latter up to replace it.)
A <script> element should either reference an external script or contain content of its own, but not both.
You need to move the code out of your jquery.carouFredSel.js script element:
<script src="jquery.carouFredSel.js" type="text/javascript"></script>
...and then include that code in a new script element:
<script>
$(window).load(function () {
...
</script>
P.S. I don't know what you have in all-in-one-min.js, but it clearly isn't actually all in one or you wouldn't need the other scripts.

Background's/JavaScript show/work locally, not on server

When I check my page stored locally on my computer everything loads fine, but when I upload it to my server, the background/slideshow transition thing doesn't work, they don't even show up. here's my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>blah</title>
<meta name="description" content="Add Site Description Here">
<meta name="keywords" content="Add Keywords Here">
<link rel="stylesheet" href="style.css" media="all">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/Easy_Background.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<!-- Fullsscreen Background -->
<script type="text/javascript">
jQuery(document).ready(function($) {
var background = new Easy_Background({
background_color: "none",
pattern: "img/patterns/pattern-4.png",
autoplay: "true",
autoplayTime: 5,
images:["img/fullscreen/1.jpg",
"img/fullscreen/2.jpg",
"img/fullscreen/3.jpg",
"img/fullscreen/4.jpg",
"img/fullscreen/5.jpg",
"img/fullscreen/6.jpg",
"img/fullscreen/7.jpg"],
images_sizing: "fill", // fill || adjust || stretch || repeat
animationIn: { attribute:["y", "alpha"], // x || y || alpha
value: ["1px", 0],
easing: ["easeOutCubic", "swing"],
time: [0.7, 1.5],
delay: 0 },
animationOut: { attribute:[],
value: [],
easing: [],
time: [],
delay: 0 }
});
$('body').click(background.next);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</head>
Use a webbrowser (I prefer Chrome), hit F12 (this opens a webinspector in Chrome and some other browser). Look for a "console" tab and reduce the errors to zero.
In fact I think you missed to upload some files.
By the way there is no JAVA Code. You mean Javascript. Thas something comlpletely different.
update
Your linked javascript resources:
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/Easy_Background.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
But you brother knows this better than me.

Categories