iam using these codes in my website to make a bxsilder
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
mode: 'fade'
});
});
</script>
<div id="slider1">
<div class="slide">
<img src="images/thumbnails/slide1.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide2.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide3.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide4.png">
</div>
<div class="thumbs">
<img src="images/thumbnails/slide1-thumb.png" />
<img src="images/thumbnails/slide2-thumb.png" />
<img src="images/thumbnails/slide3-thumb.png" />
<img src="images/thumbnails/slide4-thumb.png" />
</div>
</div>
CSS
#slider1{
width:500px;
height:400px;
background-color:#ccc;
}
.slide {
width:500px;
height:350px;
}
.slide img {
width:500px;
height:350px;
}
.thumbs {
width:125px;
height:75px;
}
But nothing appear in the page! except prev & next words
what's wrong with this code?
the post is refused because of this message "Your post does not have much context to explain the code sections; please explain your scenario more clearly."
so that iam repeating these words till it's accepted!
"Your post does not have much context to explain the code sections; please explain your scenario more clearly."
"Your post does not have much context to explain the code sections; please explain your scenario more clearly."
I tested you code with bxslider un jquery - ir works "fine". Are You sure, You have Your images correctly added?
Test Your site with Chrome Developer tools, look into Networking and Console - does it shows any errors?
Are the paths to the 2 .js files correct? That is, do you have a folder named "js" with the two files in there? Or did you just copy/paste the code from web examples??
Related
I'm using Materialize to generate modals on a php website, only the data below is clearly visible.
This is based on data from a MySQL database. For each hard drive in said db, generate a card and populate with drive data.
For testing purposes I removed all php code to see if that was what was breaking it, sadly I still had normal text punch through.
Any ideas? Are there css options I can use to force the opaque settings? Or maybe an alternative altogether, I did have a look at css overlays but had the same problem.
In the code below I've removed all php. The complete website source code can be found at my repo
here (albeit without the modal stuff as not committed to master yet)
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<!-- Drive stats on index -->
<div class="card-content center">
<h6>Hard Drive Canonical Name Goes Here via PHP</h6>
<ul>
<li>Hard Drive Size Goes Here Via PHP</li>
<li>Hard Drive Temp Goes Here via PHP</li>
<li> </li>
<li>Last updated at database timestamp goes here via PHP</li>
</ul>
</div>
<div class="container center">
<a class="waves-effect waves-light btn blue darken-1 modal-trigger" href="#modal">Launch Temperature History</a>
<div id="modal" class="modal">
<div class="modal-content">
<div class="card graphcolour">
<div class="card graphcontent">
<canvas id=1></canvas> <!-- <?php echo htmlspecialchars( $drive['DiDriveId'] )?> is what would normally be in here -->
</div>
</div>
"hello there!"
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
<!-- Status Images -->
<!-- Images would go here based on PHP if else statements -->
</div>
</div>
The materialize modal code snippets were edited versions of below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<h3>A Demo of Modal</h3>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn pink darken-1 modal-trigger" href="#demo-modal">Launch Modal</a>
<!-- Modal Structure -->
<div id="demo-modal" class="modal">
<div class="modal-content">
<h4>A Demo of Simple Modal</h4>
<p>Content of the modal goes here. Place marketing text or other information here.</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
</body>
</html>
Thanks to SeanDoherty for clarifying what I felt was the answer. I moved the Modal outside of the card, added three empty line breaks to the bottom of my card, then re-added the modal script with css offsetting. It's cheap, but it works!
.modalPosition{
top: -100px;
}
I was trying to use a DateTimePicker in the Asp.net core Razor page.
I searched the internet and found this page seems works good.
So, I went to the NuPackage and found Bootstrap.v3.datetimepicker 4.17.45, and downloaded it.
After install, I got a warning:
Bootstrap.v3.Datetimepicker 4.17.45 depends on bootstrap.less (>= 3.3.0) but bootstrap.less 3.3.0 was not found. An approximate best match of bootstrap.less 3.3.5 was resolved.
Since the bootstrap version in the project is 3.3.5, and it is a warning instead an error, so I think it should be fine. I copied the sample code into my cshtml file, and run it.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
The DateTimePicker showed up. How ever, when I clicked on the calendar button, nothing happened. It seems javascript is not running?
I searched everywhere, and I found this part in the layout page.
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
It seems I need to include the js file which contains the datetimepicker here. However, I search the whole project, cannot find any js file contains 'datetimepicker' string.
I am not familiar with front-end structure. what I did wrong or missing? Is my datetimepicker installation not success? is the js script not working on my razor page? How do I diagnose it?
Added:
I enabled the javascript debugging, and I got the following exception. It looks really wired as exception comes from the sample code, which runs with no problem on the original webpage.
The DateTimePicker.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.You could copy it in your project and add #section Scripts { and } in your project.
The better way is to use either LibMan or npm to get your client-side libraries.
Here is a simple sample in my project as below.Anyway,the version up to you:
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
#section Scripts
{
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap-theme.min.css" />
<script type="text/javascript" src="~/lib/jquery/1.9.1/Content/Scripts/jquery-1.9.1.js"></script>
<script src="~/lib/moment.js/2.9.0/Content/Scripts/moment.min.js"></script>
<script src="~/lib/bootstrap/3.3.0/content/Scripts/bootstrap.min.js"></script>
<script src="~/lib/bootstrap.v3.datetimepicker/4.17.45/content/Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
Note: moment.js should render before the datetimepicker.js
Given i have this
//mycompoent.js
Vue.component('main-nav',{
template:`
<div id="main-nav">
</div>
`
});
Vue.component('menu-nav',{
template:`
<div id="menu-nav">
</div>
`
});
new Vue({
}).$mount("#nav-app");
Then in my CSS I have the following
//style.css
#menu-nav{display:none;}
#media (max-width:840px){
#main-nav{display:none;}
#menu-nav{display:block;}
}
//index.html
<div id="nav-app">
<main-nav />
<menu-nav />
</div>
When I resize the browser less than 840px the menu-nav component never appears; I don't know what I have done wrong.
If you're testing this directly in the browser (without a compile step), you can't use the self-closing form <main-nav /> for components. Try the following:
<div id="nav-app">
<main-nav></main-nav>
<menu-nav></menu-nav>
</div>
I am using materialize css for my app, and I using materialize v0.97.0
When I try to use slider it always shows grey background, I have also initialised the slider().
Here's my markup
HTML
<div class="row">
<div class="col s12">
<div class="slider">
<ul class="slides">
<li>
<img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
JS
$(document).ready(function () {
// Plugin initialization
$('.slider').slider();
})
I have also tried various solutions, but nothing worked
Your code is alright assuming that you initialize javascript correctly. Open the page, where your slider is, right click on the grey block and choose view image. If it does not show the image it is supposed to show, then problem is with your image source. Try using source image from the web.
If it shows the image when clicking - view image, the problem is with the initialization of the javascript. Check if your webpage loads correct javascript file.
In JS I wrote following code and it worked.
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
You need to actually set the transition times in the javascript to make it work
Put this after the jQuery plugin import
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
full_width: false,
interval: 5000,
transition: 800,
});
});
</script>
Any error in your JavaScript will prevent to let the slider shows , so check your console when you refresh the page and solve them and you will be fine :)
My best guess is that the source of your tag is pointing to a wrong path.
Just tried your code with a working image path and it worked like a charm.
Please, check if your source path is pointing to the right place. For testing purposes you should try changing your source to the following:
src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Simply Use this class transparent
<ul class="slides transparent" style="height: 400px;">
The docs at bootstrap-datetimepicker don't really explain what version of jquery and moment are required to use the widget (if specific versions are needed). I don't have any jquery errors according to dev tools, and I tested the calendar icon button by adding some quick jquery which worked fine.
($("#datetimepicker10 span").click(function(){
alert('working!');
};
));
Otherwise, I have everything required in the docs loaded in the correct order (I think). However; the icon link doesn't work and thus I cannot select a date nor time. I assume it is something with how files are being loaded or the version of jquery/moment I am using because I tried dropping in this jsfiddle, and it wouldn't work either.
Any ideas would be appreciated. Any hints on how to debug this sort of js error as well would be nice for the future.
Current Code:
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
End of body..
<script type='text/javascript' src="/static/js/bootstrap.min.js"></script>
<script type='text/javascript' src="/static/js/bootstrap-datetimepicker.min.js"></script>
$( document ).ready(function() {
$('#startDate').datetimepicker();
});
Lastly, the html:
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Please have a look at this fiddle:
BS Datetimepicker
$('.datepicker').datetimepicker({
format: 'DD-MM-YYYY HH:mm:ss'
});
For custom format, just use data-date-format in your input. For example:
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control" data-date-format="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
That is format in Latin-America, Day/Month/Year