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.
Related
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
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>
First off, I'm new to JQuery, so sorry if this is something simple and I'm just missing it.
I'm attempting to use the jquery plugin called "tooltipsy" (http://tooltipsy.com/).
The end goal is for this look here: http://screencast.com/t/4AghhAI7dL
This is what currently happens: screencast[dot]com/t/mBAIm67lM6W1 (sorry, couldn't post more than two links)
Inside my code I've copied it nearly identically from the examples, but I can't seem to get it to work. This is running inside a twig template file for a WordPress website, but I don't believe that, that should affect it (of course I could be, and probably am wrong)?
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js">
$('.hastip').tooltipsy();
</script>
It links to the CSS file in the header information, and the link works just fine.
My issue is the "tooltip" itself does not appear and I can't figure out why?
Would appreciate any and all help, thanks!
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js"></script>
<script>
$(document).ready(function() {
$('.hastip').tooltipsy();
});
</script>
You can't have code inside a script src.
If I have this code showing on Wordpress, what is the easiest way to turn this into a jump menu?
<ul class='toc-odd level-1'>
<li>It's finally here</li>
<li>Improvements</li>
<li>Handling</li>
</ul>
Can i use jquery like it showed in this thread: How to convert unordered list into nicely styled <select> dropdown using jquery?
and if so, where would i place the code examples shown in said post?
For starters, if you're new to jQuery, you might have noticed that you can create inline jQuery using script tags inside of your HTML web page, or you can create a separate .js file that is linked to your HTML file (preferred) using either a CDN (check it out here) or manually providing the script doc files yourself. I prefer using Google's CDN because they have plenty of servers that are most likely closer to the client, and the client only has to load the scripts once through the CDN.
In your HTML, provide the script tags, and then start working with JavaScript and jQuery!
<head>
<title>your webpage</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
//BELOW IS YOUR OWN SCRIPT FILE REFERENCE!
<script src="Scripts/Jscript1.js" type="text/javascript" ></script>
Also, if you would like the jQuery IntelliSense to work in the script file, all you have to do is add a reference link in the script file you are using!
/// <reference path="jquery-1.7.1-vsdoc.js" />
$(document).ready(function () {
$('.toc-odd level-1').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
The above jQuery example is just 1 way out of millions that you could implement to render your code. If you have interest in learning a fast and concise library, then check out the learn jQuery in 30 days.
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.