This script function below only seems to work if one instance for the tool tip is available. I am not receiving any console errors either. Any idea what the issue could be?
Using Bootstrap 4
<!-- Tooltip link 1 -->
<p><span class="tip" data-tip="my-tip1">Load Tip 1</span></p>
<!-- Tooltip link 2 -->
<p><span class="tip" data-tip="my-tip2">Load tip 2</span></p>
<!-- Tooltip content 1 -->
<div id="my-tip1" class="tip-content hidden">
<h2>Content Number One</h2>
<p>This is my tip content One</p>
</div>
<!-- Tooltip content 2 -->
<div id="my-tip2" class="tip-content hidden">
<h2>Content number Two</h2>
<p>This is my tip content Two </p>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
Use html inside title attribute like this :
$(".tip").tooltip();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Tooltip link 1 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- Tooltip link 1 -->
<p><span class="tip" data-toggle="tooltip" data-html="true" data-placement="right" title=" <h2>Content Number One</h2>
<p>This is my tip content One</p>">Load Tip 1</span></p>
<!-- Tooltip link 2 -->
<p><span class="tip" data-toggle="tooltip" data-html="true" data-placement="right" title=" <h2>Content number Two</h2>
<p>This is my tip content Two </p>">Load Tip 2</span></p>
Working demo using selector option
$('body').tooltip({
selector: '.tip',
html: true,
placement: 'auto',
title: function() {
return $('#' + $(this).data('tip')).html()
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Tooltip link 1 -->
<p><span class="tip" data-tip="my-tip1">Load Tip 1</span></p>
<!-- Tooltip link 2 -->
<p><span class="tip" data-tip="my-tip2">Load tip 2</span></p>
<!-- Tooltip content 1 -->
<div id="my-tip1" class="tip-content d-none">
<h2>Content Number One</h2>
<p>This is my tip content One</p>
</div>
<!-- Tooltip content 2 -->
<div id="my-tip2" class="tip-content d-none">
<h2>Content number Two</h2>
<p>This is my tip content Two </p>
</div>
Related
I'm trying to build my web portfolio and I want a card format which includes an image thumbnail and text below it. The problem I have is that can't control the size of the initial image and that makes the cards misaligned.
I'm wondering if there's way to fix it so it adjusts to any image size. Here's my code
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
<i class="fas fa-code"></i> BODY OF WORK
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">FRANK DIN: WEB DEVELOPER</h1>
</section>
<section id="gallery">
<div class="container">
<div class="row">
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/LandingPage/blob/master/Landing%20Page%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Landing Page</h5>
<p class="card-text">Landing page for a fictitious dating site built with Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/Bootstrap-Image-Gallery/blob/master/BootstrapPhotoBlog%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Bootstrap Image Gallery</h5>
<p class="card-text">Image gallery built using Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Add this CSS:
.card-img-top {
height: 20vw; // change this value and/or units to your liking
width: 100%;
object-fit: cover;
}
I've been having trouble implementing Material Design Bootstrap's carousel. I copy and pasted the carousel example from their website, and I've made sure to have both the JS and CSS in the correct order when loaded. Currently my page only renders the image and text, and can be clicked on with a light effect, but no other images or slides appear and it never switches between them. It also creates a large whitespace on my screen after the carousel.
edit: Changed script.php to script.js
edit 2: Updated index.php that still doesn't work completely:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Site Name</title>
<?php //include_once $_SERVER['DOCUMENT_ROOT'].'/inc/head.php'; ?>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="https://site/css/style.css">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
<body>
<header>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/nav.php'; ?>
</header>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
<div class="mask rgba-black-strong"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<div class='shell'>
<div class='container-fluid'>
<p class='content content-header' >Title</p>
<p class='content content-text' >Content</p>
</div>
</div>
</body>
<footer>
<?php include_once $_SERVER['DOCUMENT_ROOT'].'/inc/footer.php'; ?>
</footer>
edit 3: Pictures of before and after: Before
After
I blocked sensitive information. All my other pages work fine and there is no issue with CSS. It is just this carousel that doesn't seem to work.
In your index.php page in the head tag. Try adding all of your scripts there.For now just start with the CDN from their website.. Try replacing your tags with this.. Generally it's good to reference all the script and css files you are going to use inside the tags.
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js">
</script>
<link rel="stylesheet" href="https://site/css/style.css">
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
I added a tooltip to a text using data-toggle. The tooltip shows but without any style applied to it. I'm using a JS library called popper.js.
I'm new to JS so i just copy-paste the code and library following an example, it works in my first link with tooltip (mail) but the second link ( word javascript) doesn't display the tooltip with style.
This is the example i used https://www.quackit.com/html/html_editors/scratchpad/?example=/bootstrap/bootstrap_4/tutorial/bootstrap_4_tooltips_buttons
I'm attaching screenshots tooltip displaying correctlytooltip displaying wrong
Here's the code:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div id="center">
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>first text</h1>
<!--line-->
<hr class="line2" align="center" width="80%">
</div>
<div class="contact">
<span class="script">second text</span>
<span class="sans-serif">
<a href="mailto:hello#randomood.com?Subject=Hello" data-toggle="tooltip" title="Say Hi!" data-placement="bottom" class="no-style"
target="_top">hello#randomood.com</a>
<div class="skills-box">
<span class="sans-serif">skills <br> other JavaScript </span>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
This question already has answers here:
how to select all class except the clicked element in JQuery?
(3 answers)
Closed 5 years ago.
This code removes the div that is selected, i was trying to when i click in the button that is in the div,all the other would disapear, and the one that i clicked stayed, but i only can remove the one that i click, sry for my english and sry for being a beginner at jquery.
I have here a video to youtube to show you better what is my problem https://www.youtube.com/watch?v=kiUECo33-d0
$('.product-removal button').click( function() {
removeItem(this);
});
function removeItem(removeButton)
{
var productRow = $(removeButton).parent().parent();
productRow.remove();
}
<html>
<head>
<title>Configurador</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/ResponsiveAccordianMenu.css" rel="stylesheet" type="text/css">
<link href="css/table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="twd_container">
<h1 style="margin:150px auto 30px auto; text-align:center">Configurar</h1>
<!--Processador-->
<div id="AL" class="expandContent">
<h3 class="header">
<div class="headerColumn1">Processador</div>
<div class="headerColumn2 expand"><img src="img/plus.png" /></div>
<div class="expandedContentClearFloat"></div>
</h3>
<div class="expandedContent">
<div class="container">
<ul id="orders">
{% for item in processador %}
<div class="product-removal">
<li>
<div class="row carousel-row" >
<div class="col-xs-8 col-xs-offset-2 slide-row" id="container">
<div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="iconcomp" src="{{ item.img|e }}" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>{{ item.marca|e }}</h4>
<p>
{{ item.descr|e }}
</p>
</div>
<div class="slide-cima" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button class="btn2" id='remove' value='{{ item.id|e }}' onclick="rmv(this)"><i class="fa fa-fw fa-undo"></i></button>
</span>
</div>
<div class="slide-footer" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button name="" class="btn1" id='item' value='{{ item.id|e }}' ><i class="fa fa-fw fa-shopping-cart"></i></button>
</span>
<button class="remove-product">
Remove
</button>
</div>
</div>
</div>
</li>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<!-- scripts-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/ResponsiveAccordianMenu.js"></script>
</body>
</html>
use this this hides all div except one you click
$('div').click(function(){
$('div').not(this).hide();
});
provide selector as per your's
<div class="salt">
<a href="#" data-reveal-id="myModal" data-animation="fadeAndPop">
<img src="img/CLR.jpg" width="116px" height="48px">
</a>
</div>
<div id="myModal" class="reveal-modal">
<h1>Title</h1>
<p>content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
on click that image nothing will display.
reavel.js link is
https://dl.dropboxusercontent.com/u/48992367/AppzVenture/extra/jquery.reveal.js
jsfiddle link
http://jsfiddle.net/8Leu4/2/
here is what's missing in your code :
the link of the reveal CSS file ;
<link rel="stylesheet" type="text/css" href="reveal.css">
include the jquery 1.4.4 or higher
and include jquery reveal
the files needed for this can be downloaded from here
so your code should be like this :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="reveal.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
</head>
<body>
<div class="salt">
<a href="#" data-reveal-id="myModal" data-animation="fadeAndPop">
<img src="img/CLR.jpg" width="116px" height="48px"/>
</a>
</div>
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>