I am trying to use Fomantic ui "toast". How can i provide z-index to the setting of the Toast?
I have tried this 'it works normally but not on the site i am working on'
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body>
</body>
</html>
Give id to your body and handle via CSS like below.
#yourID {
background-color:rgba(255, 0, 0, 0.4);
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yourID')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body id="yourID">
</body>
</html>
Note: work with id , not with class.
The z-index for toast is given by the toast-container which already got z-index:9999 by default.
You can override this according to your needs (check your sites code for the highest z-index and add 1) by
.ui.toast-container {
z-index: 999999;
}
Every toast inside this container will inherit the z-index. To be even more sure you might add the z-index for every single toast as well
.ui.toast-container .toast-box {
z-index:999999;
}
Related
I cannot get this piece of code to work outside of jsfiddle. I dont understand why it doesn't work from my local server.
http://jsfiddle.net/gHb9F/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<style type='text/css'>
a, a:visited { color:black }
a.link.active { color:blue; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
});
});
});//]]>
</script>
</head>
<body>
Link 1
Link 2
</body>
</html>
What am I doing wrong?
probably you are not including correctly the jquery link into your html, try to add this line into your head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Please help i know this is a noob question but I stuck on this for several days.Thanks in Advance.
This is my Jquery when I open JS cosole it shows me error $ is not definded.
Why my Jquery code doesne't work. Am i properly connected to Html?
$(document).ready(function() {
$('#container').mouseenter(function() {
$(this).animate({
height: '+=10px'
});
});
$('#container').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
$('#container').click(function() {
$(this).toggle(1000);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="dev.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id = "container">
</div>
</body>
</html>
Since your script file uses jQuery, ti should be added after jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dev.js"></script>
Hi this is my code,
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () { //on clicking the link above
$(this).colorbox({iframe:true, width:"80%", height:"80%"});
});
});
</script>
</head>
<body>
<h3>External Form</h3>
Please fill out my form.
</body>
</html>
It works fine, like as lightbox pop-up . Now i need when the form display, the scroll bar should be remove, How it possible with my code?
Please help me?
try this
Set overflow: hidden; on the body tag like this:
<style type="text/css">
body {
overflow:hidden;
}
</style>
I really need help with this one. I would like to replace the default scrollbar on my iframe with the "perfect scrollbar".
I have downloaded the perfect scrollbar. I also have included the needed files into my html document. According to the documentation, I set up the style of content container inside my iframe. The result is, that when I load my main page and move the mouse cursor on iframe, the "perfect-scrollbar" appears, but the default scrollbar remains. Next issue is, that the new scrollbar is not functional at all. It starts on the top of the iframe content and it ends at the bottom of the iframe content so I can not scroll with it.
HTML of my iframe content page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="../css/iframestyle.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/perfect-scrollbar-0.4.8.min.css" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<title>TITLE</title>
</head>
<body>
<div id="amfCont">
..... // content to be scrolled
</div>
</body>
</html>
CSS:
#amfCont {
font-family:"Verdana";
text-align:justify;
position:relative;
overflow:hidden;
}
JS (included scroll.js)
$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});
Can anyone point out what do I have wrong here?
Try jQuery Scrollbar in your iframe.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollbar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<script>
jQuery(function($){
$('.page-wrapper').scrollbar();
});
</script>
<style type="text/css">
html, body, .page-wrapper {
border: none;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page-content {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="page-wrapper scrollbar-macosx">
<div class="page-content">
[CONTENT HERE]
</div>
</div>
</body>
</html>
In example above I've used scrollbar-macosx class, but you can choose any from predefined styles or make your own custom scrollbar - it's fully CSS customizable.
#amfCont needs a height property for this plugin to work. Here's the example from the docs.
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}
I was able to set shadowbox to initailize upon page load to show a photo, but I need it to show a bunch of photos, and after looking at the shadowbox site, I cannot find how to do this.
html for page:
<link rel="stylesheet" type="text/css" href="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content:'images/IMG00255-20110531-1435.jpg',
player: "img",
title: "Before and After- Hyundai Tiburon",
height: 400,
width: 700
});
};
</script>
I couldn't find a way to do it with shadowboxes built in functions but this is pretty simple and should work fine.
<!DOCTYPE html>
<html>
<head>
<title>Shadowbox</title>
</head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<style type="text/css">
/* Hide all <a> tags */
a[rel~="shadowbox"]{
display: none;
}
</style>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- on page load, fake a click to call shadowbox -->
<body onload="document.getElementById('first').click();">
<!-- put all gallery items like this. Only the first link needs the id "first". -->
</body>
</html>