Here's my code:
<div class="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div id="tabs-1">
tab1
</div>
<div id="tabs-2">
tab2
</div>
<div id="tabs-3">
tab3
</div>
<div id="tabs-4">
tab4
</div>
</div>
<script>$(function() { $( ".tabs" ).tabs(); });</script>
The tab titles are fine however the content is not displayed properly, here's a screenshot
When I viewed firebug's code, I found that the content tabs are loaded but the content is not included in them. How to solve this?
Try the following in your script tag:
$(document).ready(function() {
$("#tabs").tabs();
});
It looks like you are trying to use the class selector with yours script.
Related
ts file
html file
This is the code in my project. When clicking on modal button it's not showing anything.
HTML:
<button data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JavaScript:
declear const M;
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
have you imported the css,js correctly? can you give us more details about your code? e.g How does your .html looks like and how is your folder structure etc?
My requirement is something like this.
I got the list of images from the back-end.
I want to pass those image names to the carousel to display images.
This is my code.
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
}
}
</script>
But this method doesn't work. How do I pass images to my carousel element?
The problem is that you're setting all carousel slides to active, so they will all display at once. Use :class to conditionally set the active slide...
<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
<img :src="banner" alt="" class="img-fluid">
</div>
Also, make sure the :src="'./assets/${banner}'" reference is actually working to find the images.
Working demo on Codeply
Note: You don't want to use jQuery $('.carousel').carousel(); to load the Carousel since you're already using the data-ride="carousel" attribute. As stated in the Bootstrap 4 docs...
The data-ride="carousel" attribute is used to mark a carousel as
animating starting at page load. It cannot be used in combination with
(redundant and unnecessary) explicit JavaScript initialization of the
same carousel.
From https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
Vue hasn't mounted this component yet on page load. So you gotta initialize the slider only after it has mounted.
So you gotta remove data-ride="carousel", and add $('.carousel').carousel() in the mounted hook (assuming that the jquery $ is available as a global variable). Make sense ?
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
},
mounted(){
$('.carousel').carousel();
}
}
</script>
I used bootstrap 3 and blueimp-gallery in a web html5. My problem is a carousel-gallery dont show images and receive a error in a console "Uncaught TypeError: Cannot read property 'style' of undefined" when i use a blueimp-gallery-carousel in a modal div, but if i enter in a developer tools for chrome, this error disappears, and the images show in carousel-gallery.
The code.
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Vinilos</h2>
<div id="links">
1
2
3
</div>
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my javascript
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
</script>
and the link web problem
http://www.colombiawaterprint.com/web/index3.html
How i Solve this error?
I believe your problem is that your blueimp gallery is initially hidden as it is in a Bootstrap Modal. As such, when you first initialize the gallery it can't find the gallery. I think all you need to do is wait for the Bootstrap modal to be shown and then initialize the gallery.
Bootstrap triggers an event that you can listen for for this very purpose - http://getbootstrap.com/javascript/#modals-events - You probably want the shown.bs.modal event.
You would use it something like this. (assuming jQuery is loaded)
$('#portfolioModal1').on('shown.bs.modal', function (e) {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
})
Bear in mind this is untested code and may not 'just work'. But hopefully you get the idea. You also may want to do a test to see if you've already initialized the gallery, as it stands this would re-initialize it every time the shown.bs.modal event was fired.
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;">
My _Layout.cshtml file has three "div" situated in one "div"(div id="content"). The full code is:
<body id="bckgrimg">
<div id="content">
<div id="leftcolumn">
<ul >
<li>Contact us</li>
<li>About us</li>
</ul>
</div>
<div id="centercolumn">
We'll put something useful here later
</div>
<div id="rightcolumn">
<div id="gallery">
<img src="..."/>
<img src="..."/>
<img src="..."/>
</div>
</div>
</div>
I have tried to put data by writing "some text" in xxx.cshtml but I just add new element on a web page as I have yet created in _Layout.cshtml. I just would like to put exactly data from various .cshtml files into of _Layout.cshtml.
Is it possible to put data from xxx.cshtml file into (Where it is wtiiten "We'll put something useful here later") of_Layout.cshtml?
Use sections. They enable you to insert content from any views into the layouts used by said views.