Manually open Featherlight Gallery with text content - javascript

I'd like to display 1 or more content details in a featherlight gallery, so users can swipe or click from page to page, and then close to return to their previous tasks. The content might look something like this:
<div id="ContentDetails">
<div class="ach">
<h3>Title 1</h3>
<p>Content Item 1</p>
</div>
<div class="ach">
<h3>Title 2</h3>
<p>Content Item 2</p>
</div>
<div class="ach">
<h3>Title 3</h3>
<p>Content Item 3</p>
</div>
</div>
JSFiddle: https://jsfiddle.net/6n0a55qn/46/
I can get the single $.featherlight($("div.ach")); call to work, but it places all the text in the same lightbox -- I'd like each content item in a separate "slide." Unfortunately, the same call to $.featherlightGallery($("div.ach")); doesn't appear to do anything. Some questions from a really new user:
Can featherlightGallery() be called manually like featherlight()?
If so, what's the syntax that would separate each of those blocks into their own "slide"?

Okay, got it to work. In answer to the questions above:
Yes, featherlightGallery() can be called manually, like featherlight(). There does appear to be a distinction, though...
It doesn't look like featherlightGallery() likes <div> content elements, at least in the current version (1.7.6) (note that the call to featherlight() is okay with <div> elements, though). I was able to create a gallery by changing the outer <div> elements to <a> guys instead, as follows:
<a class="slides" href=".slide-1">
<div class="slide-1">
<h3>Title 1</h3>
<p>Content Item 1</p>
</div>
</a>
<a class="slides" href=".slide-2">
<div class="slide-2">
<h3>Title 2</h3>
<p>Content Item 2</p>
</div>
</a>
<a class="slides" href=".slide-3">
<div class="slide-3">
<h3>Title 3</h3>
<p>Content Item 3</p>
</div>
</a>
To manually call the gallery:
$.featherlightGallery($(".slides"));
jsfiddle: https://jsfiddle.net/6n0a55qn/66/

Related

Image Not Appearing in JQuery Script

I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.

Display the same piece of javascript script in bootstrap columns that are col-sm6

I have a javascript script with a function called fuctionone() that displays a graph. I call this script below in a p tag so when 'HERE' is clicked the graph is displayed below each header.
<svg width="480" height="250">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example one</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example two</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</svg>
However I want to display the same graph in each column but when I click the HERE link above only one graph is displayed under Example one when I want two graphs displayed for each.
One under Example one and one under Example two.
Is the <svg> tag messing this up somehow?
functionOne has no idea where it's being called from if I had to guess. Next time I'd recommend posting your javascript for clarity. Pass the element to your javascript function, then manipulate the DOM.
functionOne(this)

Apply one click event handler to multiple elements

I'm trying to get my javascript to pop up a message under for each comment when its clicked.
I have 3 comment boxes, each has 1 "popup" button under it, and when the "popup" is clicked, it would alert a message ("Ouyeah!")
Only clicking the first "popup" link on the top alerts the message "Ouyeah!", and the message is alerted 3 times. Clicking on other 2 "popup" links has no action.
Code:
<div class="media">
<div class="media-body">
<p align="right">
<span>popup</span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span>popup</span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span>popup</span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
JS:
<script type="text/javascript">
$("#reply_open").parent().parent().parent().parent().children(".media-body").children("p").children("span").children("#reply_open").click(function(){
alert ("Ouyeah!");
</script>
Only clicking the first "popup" link on the top alerts the message "Ouyeah!", and the message is alerted 3 times. Clicking on other 2 "popup" links has no action.
How to fix this? Many thanks,
You cannot have duplicate IDs.
Using id="reply_open" thrice (more than once!) is wrong and makes your HTML invalid.
JSFIDDLE DEMO -> http://jsfiddle.net/LC9gg/4/
This may be what you want. Make the IDs as classes & write the below code.
$(".reply_open").click(function () {
alert("Ouyeah!");
});
First of all, your HTML is incorrect in a few ways:
Your id's must be unique
You didn't close your .media div tags.
You're using JavaScript for a empty href
Try this instead:
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
I removed the id's altogether, they're not necessary. The .media divs are properly closed, and the JavaScript was removed from the hrefs.
Then, instead of searching through the DOM like you're doing with chained .parent() calls, try this js:
<script>
$('.media .media-body a').click(function(){
alert("Ouyeah!");
});
</script>
This adds a event handler to each a, that should alert the desired text.
Working example

foundation tabs with one up not working

I have two tabs on my page and I would like the page to init with both tabs closed. I cannot get it to work. If I switch to accordion I can get both to init closed.
Is there a different property for tabs?
Also I would assume closing a tab would occur if you click on a tab that is already open. However that is not the case.
<div class="section-container auto tabs" data-section data-options="one_up: false;">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
http://jsbin.com/omuvik/1/
I believe this was a design decision on the part of the Foundation team, as tabbed content normally has one section open at all times. If you resize a browser window with all accordion elements closed to the breakpoint where those become tabs, the first one will be forced open, which makes it seem like a deliberate behavior.
You can try setting a callback function in your data-options attribute: if you remove the "active" class from all tab sections, they'll all be closed.

jQuery Tabs "common" markup

I have a number of jQuery UI Tab divs. Is there any way to have markup that is common to all of the tab / divs? Specifically, I would like to add save and cancel buttons but really the markup could contain anything.
I can duplicate these across all my tabs if needed or simply add the markup within the outer div and give it some negative margin (moving it to within all of the tab areas.
Maybe you could add the commom content in a single div and then before invoking the tab plugin, just add that common markup to each of the content blocks. Something like this:
Markup:
<div id="commonContent">
<p>Some common stuff</p>
</div>
<ul id="tabNav">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div id="tabContent1" class="tabContent">
<p>Content 1</p>
</div>
<div id="tabContent2" class="tabContent">
<p>Content 2</p>
</div>
<div id="tabContent3" class="tabContent">
<p>Content 3</p>
</div>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#commonContent').hide().appendTo($('.tabContent'));
$('#tabNav').tabs();
});
})(jQuery);
</script>
Not tested, just giving the idea.

Categories