fancybox - adding class to iframe for styling - javascript

I wanted to ask if it's possible do add some class to fancybox, to do some actions.
Now i have something like:
</i>show movie
And
some default simple code to open movie on page start:
This Javascript is inside generic fancybox function
$('fancybox.iframe').trigger('click');
And this works, on page load fancybox is shown.
But now i want for example to do something with this fancybox, for example on scroll page down, move fancybox right, but this can't be done, as i can't find method to select this element by Jquery, for more advanced actions...
So, i want to add some class for example and then use this as selector for Jquery.
Thanks for help.

You could use the wrapCSS - option of fancybox (compare here: http://fancyapps.com/fancybox/#docs) and assign a class to the fancybox.
$('fancybox.iframe').fancybox({
wrapCSS : 'someClass' });
Then call the class with jQuery.
$('.someClass').doSomething();

Related

Can the bootstrap accordion control a DIV?

I am wondering if the bootstrap accordion can control a DIV without javascript.
I want to achieve this effect: https://testbuttons.bss.design/accordion.html
but now I am using:
$('#btn_lesson-1').click(function(){
$('#lesson-1').show();
$('#lesson-2').hide();
$('#lesson-3').hide();
});
$('#btn_lesson-2').click(function(){
$('#lesson-2').show();
$('#lesson-1').hide();
$('#lesson-3').hide();
});
$('#btn_lesson-3').click(function(){
$('#lesson-3').show();
$('#lesson-1').hide();
$('#lesson-2').hide();
});
But it gets annoying to create code for more lessons.
Or maybe there is some other way to achieve thisņ Maybe some simple CMS?
Thanks!!!!!
If you are using bootstrap, the accordion should already be opening and closing elements by default based on the clicked element. See this example: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

Adding a class to all the images in the webpage except for a particular <div> using javascript

So I want to add a class to all the images in the webpage except for a particular <div>. I have made this code that will add a class to all the images in the webpage:
$(function(){
$('img').addClass('posts');
});
I need a similar code that does the vice-versa.
You can use the jQuery .not() method:
$(function(){
$('img').not('.posts img').addClass('aden');
});
I'm not sure what you mean by "do the vice-versa". Are you saying you want to remove the posts class from those images, or add it just to the images within that div?
leave it as you have there, and then remove the class from the image with a specific ID:
$('#imageID').removeClass('posts');
or if you want all images within a specific DIV not to have that class:
$('#divID img').removeClass('posts');
Of course this depends if your code justifies doing it this way or not, this is the best "cheating" option if you have a lot of images and you want "to skip" a specific image or a bunch of them from the class assignment.
You can use a custom attribute for the images you want to update:
<img ... update="true">
('img[udpate="true"]').attr("src"," url...")

Javascript Run Action on click of a Hyperlink

My Javascript knowledge is extremely low, so sorry for this stupid question, but I have searched everywhere.
I'm using a single page scrolling script, but trying to add a navigation bar. The documentation references this for changing to a page:
$(".main").moveTo(3);
How do I make a link to run this? I just want a Hyperlink that runs this when clicked, but cannot work out how to do it.
You can use the selector for the hyperlink as
$('a').click(function () {
// paste your function here..
})
You can use a specific selector such as its class as
$('a.move').click(function () {
// function
}
Where its HTML will be as
Click Me
No, you don't. If the hyperlink does not link to a resource, it's not a hyperlink and you should not use the <a> tag. What you're describing is a "click to do something" element, which is the <button> element. Simply use this:
<button onclick="$('.main').moveTo(3)">click this</button>
And then use some CSS to make the button look like whatever you need it to look like (button default styling is just CSS, so turn off the border and background color, and now it looks like plain text)

CSS-sprite menu and jQuery addClass() method

I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)
Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.
I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.

Scrolling effect with the destination highlighted with jQuery

I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.

Categories

Resources