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>
Related
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
When I save data to mysql, it saves and a success sweetalert2 shows the response. After timer out it disappears but doesn't execute function.
My code is as below:
swal({
position: 'center',
type: 'warning',
title: 'Exam already exist',
showConfirmButton: false,
timer: 2500,
},
function () {
window.location.href = 'examination.php';
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
use onClose() function
swal({
position: 'center',
type: 'warning',
title: 'Exam already exist',
showConfirmButton: false,
timer: 2500,
onClose: () => {
window.location.href="https://google.com"
}
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.js" type="text/javascript"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
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
I am currently trying to make codemirror and summernote work, I have followed a online tutorial but there seems to be a problem with the file dependencies. My code is. I have taken the online file urls from summernote's example page, so it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Code editor</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet"/>
<link href="css/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<!-- Add custom CSS here -->
</head>
<body>
<div class="row">
<br />
<div class="container">
<div class="col-lg-12">
<form action="">
<div class="form-group">
<label for="">Descriptions</label>
<textarea id="description" rows="10" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
<!-- /.end Footer -->
<!-- /.end container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/summernote.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#description').summernote({
height: 400,
codemirror: {
theme:'monokai'
}
});
});
</script>
</body>
</html>
Any help would be appreciated.... thanks
Refer the following code snippet, it's working perfectly fine for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>summernote</title>
<!-- include jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
codemirror: {
theme: 'monokai'
}
});
});
</script>
</head>
<body>
<textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
</body>
</html>
Then point the cdn urls to the local file system url where the files are being located.
Use prettifyHtml: false to disable summernote formatting your code
$scope.summernoteOptions = {
height: 690,
focus: true,
prettifyHtml: false,
codemirror: {
theme: 'default',
mode: "text/html",
lineNumbers: true,
tabMode: 'indent'
}
};
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?