After over 2h trying to troubleshoot this myself, here I am - a newbie!
Issue: I'm trying to create a MAGNIFIC LIGHTBOX GALLERY (just like the example: http://dimsemenov.com/plugins/magnific-popup/) but when you click on an image, it opens into a new page (so gallery doesn't work - see what's happening life here).
Here's my HTML:
<div class="grid gallery popup-gallery" id="portfolio-grid">
<div class="col-4_sm-6_xs-12">
</div>
<div class="col-4_sm-6_xs-12">
</div>
<div class="col-4_sm-6_xs-12">
</div>
<div class="col-4_sm-6_xs-12">
</div>
</div>
And my Javascript:
$(document).ready(function() {
$('.popup-gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
});
Side notes/Requirements: I'm using Gridlex Flexbox for wrapping images in a grid and it's a dynamic website so images are uploaded via Jekyll.
Any clues?
Thank you!
Related
I`m trying to build a carousel/rondell with glide.js.
I want the left and right arrows to be displayed outside of the glide-track.
The carousel/rondell should be fully responsive.
Here is a picture of how it should be.
Can somebody help me with that?
Thank you!
You have to write the logic for arrows by yourself as Glide only looks for controls inside its root element.
Use a Glide API and the .go() method on previously queried HTML elements.
var nextButton = document.querySelector('#next');
var prevButton = document.querySelector('#prev');
var glide = new Glide('#glide');
nextButton.addEventListener('click', function (event) {
event.preventDefault();
glide.go('>');
})
prevButton.addEventListener('click', function (event) {
event.preventDefault();
glide.go('<');
})
glide.mount();
Visit Glide API documentation for more informations
You can now customize the buttons by CSS
let glide =new Glider(document.querySelector('.glider'), {
slidesToShow: 1,
dots: '#dots',
draggable: true,
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.css">
<script src="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.js"></script>
<div class="glider-contain">
<div class="glider">
<div>your first content here</div>
<div>your second content here</div>
<div>your third content here</div>
<div>your content here</div>
</div>
<button aria-label="Previous" onclick="glide.scrollItem(glide.slide-1)" >«</button>
<button aria-label="Next" onclick="glide.scrollItem(glide.slide+1)">»</button>
<div role="tablist" class="dots"></div>
</div>
The resize event I created to show my slick sliders' images in my modal is only firing once on the initial width. If I close the modal, manually move the width of the window, and open the modal again, the images aren't resized. Therefore, they don't appear.
HTML:
<section>
<button id='show' onClick='showDialog()'><img src="img./(This is where I put the name of my image).jpg"style="width:100%;max-width: 400px"></button>
<div id='dialog'>
<span>
<div id="mySlickSlider">
<div class="mySlide">
(This is where I included the images in my slick slider)
</div>
</div>
</span>
<button id='close' onClick='closeDialog()'>×</button>
</div>
</section>
JS:
$('#show').on('click', function(e){
$('#mySlickSlider').resize();
});
Since the resize function was not working, I used a timeout function for the different classes that comprised my slick slider and set it to 0 so there was no lag.
$(window).on('click', function () {
setTimeout(function() {
$('.mySlideNav').slick("getSlick").refresh();
$('.mySlide').slick("getSlick").refresh();
},0);
});
I'm trying to build an SPA using jquery. I have some html (nothing special).
I just have a menu and some divs. Depending on which menu item you click, a specific div should be displayed.
I can use .show() and .hide() and make use of id's and data-attributes.
But I was wondering if there are better ways to perform this kind of functionality.
I have simplified your code to the bone to show it easier
Since your ID on the triggers kind of matches your sub-menu, I have used them to target the content. You would put the code in doc ready.
$( "#" + this.id.replace("-tab", "-menu") ) this line simply uses the clicked ID and replaces the -tab with -menu. This is done to work with your current html
var $menu = $('#menu');
var $subMenu = $('.sub-menu');
$('.menu-item').on("click", function() {
$menu.hide();
$( "#" + this.id.replace("-tab", "-menu") ).show();
});
$('.back-btn').on( "click", function() {
// hide all sub-menu, no need to be specific
$subMenu.hide();
$menu.show();
});
.sub-menu {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="menu">
<div id="weed-tab" class="menu-item">
<p class="menu-name">Wiet</p>
</div>
<div id="indica-tab" class="menu-item">
<p class="menu-name">Indica</p>
</div>
</div>
<div class="container-fluid sub-menu" id="weed-menu">weed
<div class="back-btn">
back
</div>
</div>
<div class="container-fluid sub-menu" id="indica-menu">indica
<div class="back-btn">
back
</div>
</div>
When we use LoadingController in Ionic 3, it takes the fullscreen control.
Is it possible to create loading screen just for an HTML element?
For Example I have 4 cards displayed in a page and each of them will show the loading until the data is loaded. In the mean time, rest of the elements should be available to the user.
I have tried to implement it but can not find help from Ionic 3 Doc
I have tried custom loading with the following code but it did not work. It still takes the full screen.
TS page:
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>`,
duration: 5000
});
loading.onDidDismiss(() => {
console.log('Dismissed loading');
});
loading.present();
}
HTML page:
<div class="custom-spinner-container">
<div class="custom-spinner-box"> My content here...</div>
</div>
I'm trying to make a site using bootstrap where one row of a table will be clickable. ie, I want it to show me text (click here for Stackoverflow) such that when the user clicks in that table row, they are directed to http://stackoverflow.com.
Note that I do not want just the text to act as a hyperlink; that would be trivial. I am trying to make the entire .row element a hyperlink.
The code is just standard bootstrap tables.
<div class="col-md-3">
<div class="row">
<p>Text here</p>
</div>
<div class="row">
<p>More text</p>
</div>
</div>
Things I have tried:
I have tried adding a transparent picture on top of the row, and after wrangling with the positioning, ended up setting it as the background image of the row. Now it doesn't show up, and even if it did, still wouldn't act as a link.
Novice to bootstrap, willing to try almost any approach.
You should make a div with an id that you can use in Javascript like this:
<div id='clickme'></div>
Then you should import the Javascript you are about to make like this:
<script type='text/JavaScript' src='yourFile.js'></script>
Then you should make a method in your .js file that is in the same directory as you html page that looks like this:
var myMap = document.getElementById("clickme");
myMap.onclick = function() {
var myVar = window.open("https://www.stackoverflow.com");
};
I am 100% this will work for you. This will let you cover whatever area you want with this div you made and if anything inside of it is clicked then it will open a new tab with stackoverflow.
var rows = document.querySelectorAll('.table .row');
[].slice.call(rows).forEach(function (el) {
el.onclick = function (e) {
window.open(el.dataset.href);
};
});
https://jsfiddle.net/DTcHh/8298/
Try using a Jquery function as below
on html page
<tbody>
<tr class='clickable-row' data-href='url://'>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
JQuery Function
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
window.document.location = $(this).data("href");
});
});