How would I loop over some links in a div and apply the Bootstrap tooltips to them based on their title text. So for example I would need this:
Link 1
Link 2
Link 3
To become this:
Link 1
Link 2
Link 3
Check it:
$('a').each(function () {
$(this).data('toggle', 'tooltip');
$(this).data('placement', 'bottom');
$(this).tooltip()
});
//for disable :
$('a').each(function () {
$(this).removeAttr("data-toggle");
$(this).removeAttr("data-placement");
$(this).tooltip('disable');
});
Try this:-
$('a').each(function(){
$(this).attr({
'data-toggle': 'tooltip',
'data-placement': 'bottom',
}).tooltip();
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Link 1
Link 2
Link 3
Related
I have a magnifying glass that when you hover or click on it, it expands to a full search bar. I want the functionality to be that when the search bar is active, it will stay expanded until clicked off, or will stay expanded if the bar has a value. I have the logic in jQuery, but this is my first time using AngularJS (not Angular) and I do not know how to turn this jQuery into a directive, or if there is some built in functionality I am missing. Thank you!
jQuery("#inpt_search").on("focus", function () {
jQuery(this).parent("label").addClass("active");
});
jQuery("#inpt_search").on("blur", function () {
if (jQuery(this).val().length == 0)
jQuery(this).parent("label").removeClass("active");
});
var myApp = angular.module('myApp', []);
// set for Home Controller
myApp.controller('HomeCtrl', function($scope) {
$scope.blueClass = function() {
$scope.class_name = "blue";
$scope.multi_message ="Blue Class Added";
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<html>
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="HomeCtrl">
<div class="alert" ng-class="{blue:'bg-info', red:'bg-danger',green:'bg-success' }[class_name]">{{multi_message}}</div>
<a class="btn btn-info" ng-click="blueClass()"> Blue Class</a>
</div>
</body>
</html>
Can I write a custom confirm box in JavaScript that, instead of the default OK and CANCEL button, shows a SAVE and DELETE button?
Use the jQuery UI Dialog Box for this.
You can do something like this:
JS:
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Do it": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
<link href="https://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
<link href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.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.js"></script>
<div id="dialog-confirm" title="Is it treason, then?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Am I the Senate?</p>
</div>
Not with the native JavaScript confirm box. You could use one of the many JavaScript UI components that emulate modal dialogs to do this instead.
Here's an example: https://jqueryui.com/dialog/#modal-confirmation
I've never used this so use at your own risk.
$('confirm text').dialog(
{
modal:true, //Not necessary but dims the page background
buttons:{
'Save':function() {
//Whatever code you want to run when the user clicks save goes here
},
'Delete':function() {
//Code for delete goes here
}
}
}
);
This should work, but you will need to download or link to jQuery and the jQuery UI libraries to run this.
I have an owl carousel,
The navigation on it looks like this:
I want to make only two navigation buttons that look like this:
I tried to do addinf this line :
$(".owl-carousel").owlCarousel({
navigation: true,
navigationText: ["<img src='resources/img/arrow-left.png'>","<img src='resources/img/arrow-right.png'>"]
});
But it doesn't work. Is there a way that I can delete one of the dots and make the other two apear like in the picture.
Add this
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('.owl-carousel').owlCarousel({
loop:true,
dots:false,
nav:true,
});
});
</script>
Another Solution is just remove *= require owl.theme this css
and keep only navigation: true
$(".owl-carousel").owlCarousel({
navigation: true
});
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I have a simple HTML page with a table containing multiple rows. Each row has a cell with a hyperlink to another HTML page named "photos.html". Currently the "photos.html" page displays every single image linked to from the main page. I would like to change this so that if the user clicks a hyperlink on the main page, the "photos.html" page is opened but only the images relating to the specific row are displayed.
Here is a simplified example of what I am trying to accomplish:
<HTML>
<HEAD>
</HEAD>
<BODY>
Link 1 <!-- Open "photos.html" with Link 1 images only -->
Link 2 <!-- Open "photos.html" with Link 2 images only -->
</BODY>
</HTML>
Is this possible in HTML?
Use the Jquery
$("a").click(function(event){
event.preventDefault();
var url=$(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$("img", data).each(function() {
alert( $(this).attr("src") );
});
}
});
});
Update
</html>
<head>
<script src="code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$("a").click(function(event){
var anchor=$(this);
event.preventDefault();
var url=$(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$("img", data).each(function() {
//var img='<img id="theImg" src="'+($(this).attr("src"))+'" />';
anchor.next("div.images").append($(this));
});
}
});
});
});
</script>
</head>
<body>
Link 1 <!-- Open "photos.html" with Link 1 images only -->
<div class="images">
</div>
Link 2 <!-- Open "photos.html" with Link 2 images only -->
<div class="images">
</div>
</body>
</html>
data object containing the page's html code.
In this line alert( $(this).attr("src") ); you can access all the elements.
For example : Get all DIV tags
$("div", data).each(function() {
alert( $(this).attr("id") );
});