I have this code:
<html>
<head>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(document).ready(function(){ $( "#selectable" ).selectable(); });
</script>
</head>
<body>
<form method='post'>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
</ol>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->
</form>
</body>
</html>
I downloaded the jquery but it has no result
I used this site:
http://jqueryui.com/demos/selectable/#event-create
what is wrong here?
You must embed jQuery before jQuery UI, because UI uses jQuery.
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
instead of
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
Did you try placing your code inside of a ready function?
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Try putting the
$(document).ready(function(){ $( "#selectable" ).selectable(); });
Inside the <head></head> element. Also the <script src=".."> should be in <head> as well.
Related
Im working on carousel but buttons are not working and it has border. Tried to remove border with css but this time buttons also dissappered.
buttons are working on codeply: bootstrap carousel buttons
/* html tags */
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!--Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
rel="stylesheet">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/4c02f86903.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
</body>
is it necessary to add some extras in head section?
I cant figure out the solutions
The problem is with the imports of Bootstrap. You have included Bootstrap version 4.3.1, but used the html syntax for Bootstrap 5+. You also included the js twice.
Corrected code (including your custom CSS):
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
.carousel-item {
height: 500px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:blue;">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item" style="background-color:red;">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
You'd need to add your stylesheet here, otherwise this should work fine.
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
I must use localstorage in my phonegap (3.0) app so that I can call the specific number want by the user in each page. In order to do that I use a form and a script like that below. This script work in browser but not with phonegap build. I should have miss something but can't find what!
<!DOCTYPE html>
<html lang="fr">
<head>
<title>local storage</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<style>
#message {
display: none;
border-radius: 10px;
padding: 10px;
background-color: #ff0000;
color: #fff;
}
#storageDemoPage h2 {
white-space: normal;
}
</style>
<script type="text/javascript">
var localStorageKey = "allo";
$('#storageDemoPage').live('pagecreate', function() {
showStoreValue();
$('#addToStorage').click(function(e) {
localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
});
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
</head>
<body>
<section data-role="page" id="storageDemoPage">
<section data-role="header">
<h2>My app</h2>
</section>
<section data-role="content">
<p id="message"/>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Enter your number</li>
<li>
<input type="text" id="entry" name="entry" placeholder="Write digits"/>
<input type="button" id="addToStorage" value="Store value"/>
</li>
<li data-role="list-divider">Value record</li>
<li class="storeItem"/>
</ul>
<div data-role="content">
<p id="audio_position"></p>
<ul id="allRepos" data-role="listview"></ul>
</div>
</section>
</body>
</html>
Edit : add cordova script at the begining
Thanks to #QuickFix and #Chris here is the solution :
<script type="text/javascript">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
var localStorageKey = "allo";
function onDeviceReady() {
showStoreValue();
$('#addToStorage').click(function(e) {
window.localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
}
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
Here are the possible things you would have missed
a)Cordova script file inclusion in your head tag.
b)Use and listen device ready before using local storage.
Implementing this should solve your issue.
In my project i have some buttons with icon its working fine but the issue is when i long press the button it remains in active state unless i press some other button can any tell what the issue and how can i solve this.
Here is the css code for btn active state.
.ui-btn-active {
border: 1px solid #ccc;
background: #B4B7BA;
font-weight: 700;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #EDF1F4;
text-decoration: none;
background-image: -webkit-linear-gradient(#5393c5, #6facd5);
background-image: -moz-linear-gradient(#5393c5, #6facd5);
background-image: -ms-linear-gradient(#5393c5, #6facd5);
background-image: -o-linear-gradient(#5393c5, #6facd5);
background-image: linear-gradient(#5393c5, #6facd5);
font-family: Helvetica, Arial, sans-serif }
I encountered a similar issue and worked around it with something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App</title>
<script type="text/javascript" src="cordova-2.8.0.js"></script>
<script type="text/javascript" src ="assets/lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src ="assets/lib/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="assets/lib/jquery.mobile-1.2.0.css" type="text/css" />
<script type="text/javascript" >
$.mobile.defaultPageTransition = 'none'; // Remove default page transition
$('div[data-role="page"]').on('pagecreate',function(event, ui){
$('div[data-role="footer"] a', $(this)).on("taphold",function(e){
$(this).addClass("ui-btn-active");
$(this).one("touchend", function(e){
e.preventDefault();
$(this).trigger("click", e.data); // Remove this if you don't want the long press to act as a click
$(this).removeClass("ui-btn-down-a ui-btn-active");
return false;
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page-1">
<div data-role="content">
<p>Page 1</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="content">
<p>Page 2</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You can download my Eclipse project and compiled APK here
Hey there, total javascript noob here. Just wondering, I've set up some buttons inside ul tags using jquery selectable, which change colour when I click on them. One problem though, how do I make one of them select on the load of the page?
Thanks!
edit: here's my code:
<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
setLink('single');
$('#target').load($('#single a:first').attr('href'));
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
</script>
<style type="text/css">
#selectable .ui-selecting {
background-image:url(../images/nav-li-bcg.png);
}
#selectable .ui-selected {
background-image:url(../images/nav-li-bcg.png);
}
</style>
<script>
$(document).ready(function() {
$("#selectable").selectable();
$document.getElementById('current1').click();
});
</script>
</head>
<body>
<div id="tabs">
<div id="navigation">
<div id="single">
<div class="anchor1">
<ul id="selectable">
<li class="current1" id="current1"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li></ul>
</div>
<div class="clear"></div></div></div><!-- navigation -->
<div class="info">
<div class="top"></div>
<div id="target">
</div>
Simulate a click on document ready?
$(document).ready(function() {
$(".selectable .buttonSelector:first").click();
});
$('#myListItem').addClass('ui-selected');