I created a bootstrap confirmation for my link:
<a data-toggle="confirmation" data-title="Delete work order[![enter image description here][1]][1]?"
href="##"><img src="./img/delete.png" height="15" ></a>
And the JS:
$('[data-toggle=confirmation]').confirmation({
});
Everything is working fine, but the delete and cancel icons are not showing (image below). Why is it now showing? Is there a way to remove this icon and just display the buttons with its label?
Thanks
First ensure that you have all the 3 files below were included in your page.
especially the css file which contains the font.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The Image did not show because you have referenced the full links of the actual directory where it resides.
Something like this can give you a clue
http://localhost/project/img/delete.png
or you can also try adding two dots (..) to get retrieve deeper.
../img/delete.png
Mean while bootstraps has many beautiful gliphyicons that you can integrate without using images
You can try this directory with bootstrap glyphicons
<a data-toggle="confirmation" data-title="Delete work order[![enter image description here][1]][1]?"
href="##">Delete <span class="glyphicon glyphicon-remove"></span></a>
More refrences on Boostraph Gliphyicons can be found here
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
Related
I have a slight problem with using simple jQuery, css script (external) in my subpages. It works in index tho. It's supposed to slide menu pannel on left side of the page. Responsive menu basically.
Here is the js.
$("#res_menu").click(function(){
$("#left").css("left", "0px");
$("#left").css("top", "0px");
});
$("#res_menu_close").click(function(){
$("#left").css("left", "-999px");
$("#left").css("top", "-999px");
});
Simple script right ?
It's linked in the bottom of the page.
<script src="menu_res.js"></script>
jQuery script in header
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
Problem is it's not working on the subPages.
I have buttons in the other subPages too.
<a class="menu_button" id="res_menu" href="#"></a>
and
<a class="menu_button" id="res_menu_close" href="#"></a>
Im pretty new to the JS. Is there any way to tell if the script is even conncected ? Also it's a school project so nothing serious.
EDIT 1: There are no errors in the console.
be warned, I do not know what you mean, but i think you mean get the CSS sheet without coding it into HTML
<link rel="stylesheet" href="style.css">
This will import the CSS so all your ATR are in order for you to use.
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
My project consists of a menubar, and I would like to have the submenus display below when the mouse hovers over each button (hoverIntent). I am using the Wet-Boew (Web Experience Toolkit) (https://github.com/wet-boew/wet-boew) to create these features.
My project workspace consists of a main project php folder, including an index file which calls a jquery.min.js and subsequently the hoverintent.js and menubar.js.
Below is the start of the hoverintent.js:
(function($) {
// Alert Point A
$.fn.hoverIntent = function(f,g) {
// Alert Point B
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
etc...
})
My problem is that although I can reach the first alter point A I have in my code (and can generate the alter box), the program won't run the $.fn.hoverIntent = function(f,g){...} (where I have the second Alert Point B). I have a similar problem with my menubar.js (where the main functions of the code won't load).
What is usually the most common source of this problem and the best way to fix it?
It should be noted that I do call a jQuery earlier on in a different php project folder (still inside the project workspace) that has to do with a separate login program for this software. The Index file jumps to the login program to get the user's credentials before returning to the index document to display the main content.
I made sure this was the same jQuery file I later referenced in the index file before the hoverintent.js and menubar.js. Is this what is causing the issue?
Sorry I don't have all the code at this time to share, I will try to get the rest out soon. Thanks in advance.
----------------UPDATE-------------------------------
My main index file includes the head with the following code. Note the "../" are required since the wet-boew project folder is seperate from the main program project folder (index) in the workspace:
<head>
<script src="../wet-boew-master/build/js/jquery.min.js" type="text/javascript"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/outside-min.js"></script>
<script async="async" src="../wet-boew-master/src/js/dependencies/hoverintent.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/equalheights-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/resize-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/i18n/en-min.js"></script>
<script src="../wet-boew-master/src/js/workers/menubar.js" type="text/javascript"></script>
<title>Title of the Project</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/ico" href="images/icon.ico">
<script src="../wet-boew-master/build/js/settings.js"></script>
<link href="../wet-boew-master/build/grids/css/util-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/js/css/pe-ap-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/.../css/theme-min.css" rel="stylesheet"/>
<noscript><link rel="stylesheet" href="../wet-boew-master/build/.../css/theme-ns-min.css" /></noscript></head>
Further down, inside the body of the index we have the menubar:
<body>
<div id="wb-body">
<div id="wb-head">
<div id="wb-head-in">
<header>
<div id="wu-bnr" role="banner">
<nav role="navigation">
<div id="wu-psnb" >
<div id="wu-psnb-in">
<div class="wet-boew-menubar mb-mega" data-load="menubar" role="application" style="min-height: 28px;">
<div>
<ul data-ajax-replace="../wet-boew-master/demos/includes/menu-eng.txt" class="mb-menu" role="menubar">
At which point my menubar options and their respective submenus are listed as such:
<li *class=""* role="presentation">
<section role="presentation">
<h3 role="presentation">
<a href="index.php?location=activitiesMenu:index" role="menuitem" class="knav-1-0-0 mb-has-sm" aria-haspopup="true">
<span class="expandicon">
<span class="sublink"><?=$glb_string["activities"]?></span>
</span>
<span class="wb-invisible">(open the submenu with the enter key and close with the escape key)</span>
</a>
</h3>
<div *class="mb-sm"* role="menu" *aria-expanded="false"* *aria-hidden="true"* **id="myHoverIntent"**>
<div class="span-2" role="presentation">
<ul role="presentation">
<li role="presentation"><?=$glb_string["views"]?><?=($language_set_variable == 'fr'?:)?></li>
<li role="presentation"><?=$glb_string["create"]?><?=($language_set_variable == 'fr'?':')?></li>
</ul>
</div>
</div>
</section></li>
Would this be the correct location for my id="MyHoverIntent" (Bold **) in the code above?
It should also be noted that the italic code (*) above isn't changing (I'm assuming because the menubar and hoverIntent main functions aren't running). This would normally auto-update as the user hovers over each menubar option or leaves it. I know this because of the sample file that was included in the WET-BOEW folder that shows a fully functioning page (with a menubar and hoverIntent working) and these changes were observed in Firebug. Although for some reason Firebug showed that the sample never referenced menubar.js.
It's a little hard to tell what exactly you are doing that stops your code from working since we only have half of the code right now but a few things come to mind. First, the hoverIntent function will get called when you actually call it on a jQuery Object like so
$('#myHoverIntent').hoverIntent();
Second, make sure you are not doing that before the hoverIntent function actually gets defined and lastly, make sure you are passing window.jQuery into your immediately-invoked function expression
Here is a fiddle of a working example: http://jsfiddle.net/G3vCS/
I can't get javascript to work with Twitter's Bootstrap.
I've got this
<p>
<a href="#" rel="tooltip" title="first tooltip" id="example">
hover over me
</a>
</p>
And I want it to appear as a tooltip.
It won't work, so I added this inside the HEAD:
<script type="text/javascript">
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'hover'});
});
}
}
Noting thta it still wasn't working, I've deleted all script reference inside the page and added only this inseide the HEAD:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js"></script>
I´m not calling any particular file that I've downloadad, but hotlinking the original ones, and still the tooltip won't appear.
Note: I´m trying to set a new Drupal theme, so my site is inside Drupal (and the page is a tpl.php file).
Thanks for your insight!!
If you're wanting to use github files directly you need to use the raw, so you should point at https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tooltip.js not https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js
Hey all I am having a huge problem here evenafter following every step of the tutorial given here to put in a video on a popup greybox ..
The tutorial
now, the only change i have made is i have a folder inside the folder graybox called graybox which holds the JS and css files.
so my script code reads like this ..
<script>var GB_ROOT_DIR = "/greybox/";</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
there is a folder called video which has a video called video.flv.
now I have linked a text to open as shown in the tutorial .. the code is
<a title="Noodle Demo" href="player.html?filename=videos/noodle.flv">Demo</a>
when i click on the link on the web page the window opens up right but the window reads page not found .. I have the required player.html too and that is a copy paste from the tutorial, i;ve changed all the required version numbers of flowplayer etc. Please help me.
Use the rel tag. :)
<a rel="gb_page_center[560, 450]" href="player.html?filename=videos/noodle.flv">
God bless tutorials. For better centering you can get the middle of the site by jQuery for example.
<a rel="gb_page_center[560, 450]" id="player" href="player.html?filename=videos/noodle.flv">
<script type="text=javascript">
$(document).ready(function(){
cenx = $(window).width();
ceny = $(window).height();
$("#player").attr("rel", "gb_page_center["+cenx/2+", "+ceny/2+"]");
});
</script>
But it requires jquery from jquery website.