On my Site.master file, I have the following in my <head>:
<!-- jQuery library (served from Google) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet" />
<script>
jQuery(document).ready(function ( $ ) {
$('.slider').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: 3000,
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 500
});
});
</script>
What happens is, the little bullets that represent each slide as well as the "prev" and "next" arrows are not using the images they are supposed to. If I change the CSS reference to "http://bxslider.com/lib/jquery.bxslider.css" instead of my own copy, it works FINE. I have all the images and folders in the correctly reference locations.
The issue here is, I want to change some of the CSS, but I can't if I use the external file.
Apparently it needs to be pointed like this:
<!-- jQuery library (served from Google) -->
<script type="text/javascript" src=".//Scripts/jquery-1.10.2.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src=".//plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src=".//js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href=".//lib/jquery.bxslider.css" rel="stylesheet" />
Related
I am trying to call the callback on zoom in and zoom out images but the function is not called, please help
$('.materialboxed').materialbox({
onOpenStart: function(){
imgZoomIn()
},
onOpenEnd: function(){
imgZoomOut()
}
});
Do you want something like this?
$('.materialboxed').materialbox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<img class="materialboxed" width="650" src="https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpg">
Run the code snipped to check.
The following wasn't working for me, so I had to update my materialize references to this, actually I just added with the local materizalize.min files link I had:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
And then, only initialize like this (for jquery):
$('.materialboxed').materialbox({
inDuration:275,
outDuration:200,
onOpenStart: function() {console.log("onOpenStart");},
onOpenEnd: function() {console.log("onOpenEnd");},
onCloseStart: function() {console.log("onCloseStart");},
onCloseEnd: function() {console.log("onCloseEnd");}
});
I want to load the content of a Wordpress post into a Bootstrap modal. For performance reasons, I want to load it when the modal opens.
I found this in Bootstrap documentation (I'm using Bootstrap v.3.3.7)
<a data-toggle="modal" href="/wp-json/wp/v2/POST_TYPE/POST_ID" data-target="#modal">Click me</a>
How I can do to load only the content ?
Below given snippet will show you how can you do something that you want without having to do anything extra and also by not even writing conventional bootstrap modal code.
For further reference you can also visit this link. It will show you how you can create modal dynamically with minimum efforts.
function show_on_click() {
BootstrapDialog.show({
title: "Modal Title Goes Here.",
message: '<div id="simple-div" style="overflow-x : auto"></div>',
onshown: function() {
$.ajax({
url: 'http://api.fixer.io/latest?base=INR',
cache: false,
type: 'GET',
async: false,
success: function(data) {
$('#simple-div').append(JSON.stringify(data));
}
});
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
Click me
I face a problem when i try to use jqm in my website. A message of 'loading' appears on the bottom of my site. I figured out that it happens since I don't add jqm css. When I add the jqm css everything changes (color layout ect.). How is it possible to remove 'loading' message or add css without conflicts with the main css of my site?
<head>
<link href="css/site.css" rel="stylesheet" />
<!--<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> -->
<!-- disable loading msg -->
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="scripts/jquery.mobile-1.3.2.min.js"></script>
</head>
I add script in my code. Nothing seems to happen! My problem solved only when i uncomment jqm css code, but then i got many conflicts with the site.css which i dont know how to solve.
To disable jQuery Mobile loading message, you need to override global settings once mobileinit triggers. The code should be placed in head after loading jQuery and before loading jQuery Mobile libraries.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.loadingMessage = false;
});
</script>
<script src="jquery-mobile.js"></script>
</head>
Does anyone have some css styles and images to apply to jqTree to show the outline of the tree? Something like YUI treeview that shows a dotted border
http://developer.yahoo.com/yui/examples/treeview/default_tree.html
Turns out YUI treeview allows you to use existing html to render.
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/tree.jquery.js" type="text/javascript"></script>
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css">
<!-- Dependency source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
<script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" ></script>
<!-- TreeView source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js" ></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("committeeTree");
// if required, add nodes here
tree.render();
}
$(function () {
$("#myTree").tree({
data: source
});
treeInit();
});
</script>
I have two javascripts that I think are in a conflict. idTabs, which helps me make the navigation and lightbox, which is the photo gallery. I also want to add that I have a 3rd page linked, a PHP SELECT from database page.
this is in my head
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
<script type="text/javascript" src="lightbox0/js/jquery.js"></script>
<script type="text/javascript" src="lightbox0/js/jquery.lightbox-0.5.js"></script>
> <link rel="stylesheet" type="text/css" href="lightbox0/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
I dont understand what the light box doesn work. the id tabs works perfectly but when i click on a page, it doesn have the lightbox effect. i tried with at least 4-5 lightobx versions, the same effect. help ?
idTabs should be loaded after jQuery. Try the following:
<script src="lightbox0/js/jquery.js"></script>
<script src="lightbox0/js/jquery.lightbox-0.5.js"></script>
<script src="jquery.idTabs.min.js"></script>
Sanity Check: Do you have a <div id="gallery"> with links in it in the page?