I have a little project where I need to show items on one page from a other so I have a little categorie where you can click on. Then I pick the attr("href"); and set that to the page I would like to load. this works.
But how to add a <div> to it so I online load like the <div class="holder"></div> And not the whole div?
This is my function:
function setupCasesFilter()
{
j(".casemenu a").click(function(e) {
e.preventDefault();
j("ul.casesholder").load(j(this).attr("href"));
});
}
Where I can add the class inside attr("href")); ?
If you want to load a specific div element from the url then use it this way:
j("ul.casesholder").load(j(this).attr("href") + " .holder");
What seems to me that you have a .holder div on the href page you are loading, so you can pass that div's class name which you want to load with a space for ex. page.html .holder.
Related
How to put a modal image to images in a post inserted throw WordPress when i create a post.
How can I control the image insert in the article and put custom JavaScript and CSS how can I do it for WordPress website??
but it cant access the content of wordpress
$("#myModal .post_content img").each(function(){
$("#myModal p").wrap('<div class="lightgallery"></div>');
$(this).preprend('<a href="">
<img data-sub-html="'.get_post(get_post_thumbnail_id())->post_excerpt.'" class="slider-image-fullscreen" data-src="'.get_the_post_thumbnail_url($postid,'full').'" src="'.get_template_directory_uri().'/images/Magnifier.png" style="position:absolute; height:25px; width:25px;">
</a>');
});
enter image description here
Ok, u need to detect images from wordpress first, i assume u have them in a container, so u need add an ID to the image container. (also u can use a class or anything, but u need identify the image container)
in the document ready u need use a code something like this:
//This is the container which contains the images inserted by wordpress
$("#lightgallery img").each(function(){ //search all images inside
//get the imgs url
var imgSrc = $(this).attr("src");
//put the image inside a div
$(this).wrap('<div class="myImage"></div>');
//adds the button to launch the lightbox
$(this).parent().prepend('View');
//adds the button to launch the lightbox (include thumbnail)
//$(this).parent().prepend('View <img src="'+imgSrc+'">');
});
//load gallery after images get converted to links
$("#lightgallery").lightGallery({ //this is the parent container of imgs
selector:'a', //this is the button to launch the lightbox
thumbnail:false //if u want use thumbs change it to true, so u need include an image inside the button container to get detected as thumb, in this case inside the "a", u can "uncomment" the hidden line above to try it
});
You can see the complete code i already made for u (including an example css).
Click here: https://jsfiddle.net/stptaj9h/23/
Note: Dont forget to include all lightbox libraries (js and css), in this case: lightgallery.css, lightgallery.js, lg-fullscreen.js and lg-thumbnail.js
What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.
http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?
Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarIndex = $(this).data('sidebar-index');
showSideBar(sidebarIndex);
});
$('#Container').mouseleave(function(){
showSideBar(1);
});
});
function showSideBar(index){
$('.sidebarContent').hide();
$('.sidebarContent[data-index="' + index + '"]').show();
}
.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarSelector = $(this).find('.subContentSelector').val();
showSideBar(sidebarSelector );
});
$('#Container').mouseleave(function(){
showSideBar('subBarContent_1');
});
});
function showSideBar(selector){
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose
I am setting up a "Billboard" for the home page of a site. The billboard will have an active image displayed and there will be thumbnails of the right that are used to change the image on the billboard.
Something like this:
Currently I swap the images like this:
<div id="_bbImage">
<img src="images/bill1.png" class="bbImage" id= "MainBB"/>
</div><!--_bbImage-->
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill2.png" onclick="swap(this); return false;">
<img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
and the JavaScript function looks like this:
function swap(image){document.getElementById("MainBB").src = image.href;}
But now, I would like to have the thumbnail to have a different class when Its selected or "Active" to achive this effect:
I need to accomplish the class switch to active, but I also need to make sure that the previously selected tab gets set back to the "inactive" class again.
I tried something like this:
function inactiveTab(name){document.getElementById(name).className = "inactiveTab";}
function activeTab(name){document.getElementById(name).className = "activeTab";}
function inactiveTabAll(){
inactiveTab("_bbTab1");
inactiveTab("_bbTab2");
inactiveTab("_bbTab3");
inactiveTab("_bbTab4");
inactiveTab("_bbTab5");
inactiveTab("_bbTab6");
}
with:
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;">
<img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
But this doesn't seem to be working, when I click on the thumbnail I just get linked to a blank page with "image/bill2.png" image displayed.
Does anyone know a good way to accomplish this, or can anyone point me in the right directions.
Thanks in advance,
Rob
In my opinion, you could have a look at the following jquery method:
http://api.jquery.com/hover/
It has callback functions, where you can make your content visible / invisible.
Instead of your "inactivateTab" - function, you could use the "hide"-method:
http://api.jquery.com/hide/
the problem is that you are using an href for the image inside the tag.
an tag is originally a link to a given url
replace
href="xx.png" with
href="javascript:swap(this); inactiveTabAll(); activeTab("_bbTab1");"
I don't understand what's the original role of the href in your code, but you don't seem to be using it anyway
Instead of img elements, use divs and put the image into the background (use the background-image style). This allows you to define which image should be displayed where in pure CSS. You can also swap images by adding/removing classes:
.bbTabImg { background-image: url(images/bbtab1-inactive.png); }
.bbTabImg.active { background-image: url(images/bbtab1.png); }
As for inactive, use this jQuery:
$('.active').removeClass('active');
This finds all elements with the active class and turns it off. Now you can set one of them active again and the CSS above will load the correct image.
Interesting (and rather complex) issue here...
What I have is a page with two iframes and a set of links at the top, each contained inside a div with an image background. What I want is for the contents of both iframes to change (to two separate html documents) when the link is clicked, and for the background image of the link's parent div to also change. I also, however, want the parent div to automatically change back to the original class when a different link is clicked (i.e. I have two classes, 'active' and 'waiting'. When a link is clicked (and its contents subsequently displayed in the iframes) I want it to switch to class 'active'. At all other times, though, (including after a different link might be clicked and become active) I want it to go back to using the 'waiting' class.)
Here's my current code / markup:
Javascript:
function changeFrame(link) {
$('#first iframe').src=link.href;
$('#second iframe').src= (Here would be the second link, not sure how to define that)
link.ParentNode.addclass("activebutton");
HTML:
<div class="waitingbutton">
<a href="yes.html" (Somewhere here would be the second link for the second iframe) class="waitingbutton" onclick="changeFrame(this);
return false;">Button Text</a>
</div>
(After this come four more divs, each identical bar Button Text and links)
As I suspect you can tell, I'm really just guessing here. Still not hugely familiar with Javascript, hoping someone can help me out.
You seem to be using jQuery.
Here's an ugly way to do it; but it works:
Button Text
And your JavaScript:
function changeFrame(link) {
$('#first iframe').attr("src", $(link).attr('href'));
$('#second iframe').attr("src", $(link).attr('secondary-href'));
return false;
}
Note that it'd be more idiomatic jQuery to do this without any onClick handlers, but simply initialise it all in your <head>/<script> from the beginning:
<script type="text/javascript">
$(function() {
$("a.iframe-link").click(function(event) {
$("#first iframe").attr("src", $(link).attr("href"));
$("#second iframe").attr("src", $(link).attr("secondary-href"));
// Whatever used to be the activebutton, make it 'waitingbutton', and remove
// the 'activebutton' class.
$(".activebutton").
addClass("waitingbutton").
removeClass("activebutton");
// Remove .waitingbutton from this, add .activebutton.
$(this).removeClass("waitingbutton").addClass("activebutton");
// Don't allow the link's default action (to follow the href in the normal
// way).
event.preventDefault();
});
});
</script>
Then later:
<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>
I am looking for advice on a way to accomplish this. Given the following:
[Div A (contains an image)]
[Div B (contains a horizontal list of 8 or so text links)]
[Div C (contains text)]
Upon rolling over any link in Div B, how can I have Div A and Div C swap their respective contents out to something different that corresponds to the content of that link?
For example, if one were to rollover a Div B link called "Dogs", then upon that rollover, Div A would replace its contents and display an image of a dog and Div C would replace its contents and display text about dogs.
After rolling over that link, the new Div A and Div C contents will remain in place until a new link is rolled over.
I hope this makes sense. Does anyone have advice on the best way to accomplish this?
Assuming the href points to one resource that contains the content for both, but you can't just inject the entire output of the link into one element, something like this could work:
$('#divB a').mouseover(function() {
//get images from link, inject into divA
$('#divA').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' img');
//get divs from link, inject into divC
$('#divC').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' div');
});
Hmm... this should be pretty simple with jQuery (compared to some of the other answers here):
If you're unfamiliar with jQuery, the $() is a shortcut for calling jQuery(), and using
$(document).ready(function() {
// put all your jQuery goodness in here.
});
is a way to make sure jQuery fires at the right time. Read more about that here.
So first, add a class (ie .dogs) to each <a> element in your #divB list. Next, give each of the corresponding images the same class, and contain each of your text blocks in #divC in divs with the same class as well. The HTML would look something like this:
<div id="divA">
<img src="dogs.jpg" class="dogs" />
<img src="flowers.jpg" class="flowers" />
<img src="cars.jpg" class="cars" />
</div>
<div id="divB">
<ul>
<li>Dogs</li>
<li>Flowers</li>
<li>Cars</li>
</ul
</div>
<div id="divC">
<div class="dogs"><p>Text about dogs.</p></div>
<div class="flowers"><p>Text about flowers.</p></div>
<div class="cars"><p>Text about cars.</p></div>
</div>
Then use the following jQuery, putting this up in the <head> section of your HTML doc:
$(document).ready(function() {
$('a.dogs').hover(function() {
$('#divA img').hide("fast");
$('#divA img.dogs').show("fast");
$('#divC div').hide("fast");
$('div.dogs').show("fast");
});
});
We say when the document is ready, when you hover over the <a> element with the .dogs class, perform a function. That function will hide all of the images in #divA and immediately show the image with the .dogs class. Then it will hide all of the divs in the #divC and immediately show the div with the .dogs class.
You can do the same thing twice more for .flowers and .cars, or however many you have.
Keep in mind, there are more efficient ways of doing this too, if you're interested in looking deeper into jQuery, but this will be a solid way to get started in helping you understand exactly what jQuery is doing. And it keeps the script OUT of the HTML body, too!
You can change a div's contents with something like this:
<script type="text/javascript">
function over() {
var a = document.getElementById('a');
var c = document.getElementById('c');
a.style.backgroundImage = "url(/path/to/image)";
c.innerHTML = "<b>Dogs rock</b>";
}
</script>
<div id="a"></div>
<div id="b" onmouseover="over();"></div>
<div id="c"></div>
Then all you need to do is add whatever other div's you want and write code to change them appropriately. Set the initial state of A and C using css, or just call the over() function on page load.