I append the following content using jQuery to create a lightbox style popup that loads loads content using AJAX:
<div id="framebox-overlay">
<div id="framebox-wrapper">
<div id="framebox-nav-wrapper">
Previous
Next
</div>
<section id="framebox-content">
<!--AJAX to insert #single-project-wrapper content here-->
</section>
<div id="framebox-close">
<p>Click to close</p>
</div>
</div>
</div>
I am trying to get the appended next/previous links to work (.framebox-next and .framebox-prev as shown above), however the links are not triggering properly:
jQuery(document).ready(function(){
$('.framebox-trigger').click(function(e){
// Code that appends lightbox HTML and loads initial AJAX content goes here
});
// Code that isn't working:
$('body').on('click', 'a .framebox-next', function(e) {
e.preventDefault();
//remove and add selected class
var next = $('#portfolio-wrapper li.current-link').next('li > a');
$('#portfolio-wrapper li.current-link').removeClass('current-link');
$(next).addClass('current-link');
//fade out and fade in
var nexthref = $('#portfolio-wrapper li.current-link a').attr('href');
$('#single-page-wrapper').fadeOut('slow', function(){
var current = $('#portfolio-wrapper li.current-link a');
$(this).load(nexthref + " #single-page-wrapper", function(){
$(this).fadeIn('fast');
});
});
return false;
});
});
This last bit of code is not doing anything to the appended link .framebox-next. I have looked for other answers, and it seems that the .on() method should be effecting appended content.
Any help or input would be great.
Your selector is wrong for .framebox-next. You have a space between a and .framebox-next which would mean .framebox-next needs to be a child of the a element.
Use this selector instead:
$('body').on('click', 'a.framebox-next', function(e) {
...
}
Related
I have a script inside a div which I want to refresh when someone clicks a button with a unique ID.
I have some data which will be displayed inside the div - which I need to refresh without refreshing the whole page.
I've found a solution which changes a border colour but I can't quite simplify it to what I need. Here's what I have so far
var storeColor = 'red';
$('#container').on('click', 'button', function() {
var $p = $('#content p');
var tmp = $p.css('border-color');
$p.css('border-color', storeColor);
storeColor = tmp;
});
</div>
<button type="button">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
I think there are a few problems with your code... The button is outside of the container and thats the reason the click listener doesn't work. Inside the click function you try to access a paragraph p inside some element with the id content which doesn't exist in your code
var storeColor = 'red';
$('#btnRefresh').on('click', function() {
var $p = $('#container');
$p.css('background-color', 'red');
$p.html('hello world');
});
<button type="button" id="btnRefresh">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
Why not try changing the entire inner content of the div dynamically using document.querySelector('.div').innerHTML = html string
The above will not refresh the page if used upon a button click. You may want to use the preventDefault in the button's event listener too.
I am using JQuery show and hide function, it works like when you click on image it opens a information log. The information log opens at the top of the page, so I need to make that when you click on the image on bottom on the page it scroll you up to the content.
JQuery what I am using for my hide and show content:
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
Scrolintoview function that I tried to use:
function myFunction() {
var elmnt = document.getElementById("targetDiv");
elmnt.scrollIntoView();
}
Content from witch I am calling both functions:
<a onclick="myFunction()" class="showSingle" target="{$ID}">
//HTML content here
</a>
Content what I am calling to shop up at the top of the page:
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
I tried to combine this two JS function but only jQuery('.targetDiv').hide() works for me.
The problem is that your target div
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
has some id and the classes targetDiv and SlideDiv.
document.getElementById("targetDiv") tries to find an element with the id targetDiv but your element does not have this id, but is has a class with the same name.
You need to find the element by its class which can be done in a few ways:
1
var elem = document.getElementsByClassName("targetDiv")[0];
2
var elem = document.querySelector(".targetDiv");
3
var elem = $(".targetDiv")[0];
In this case,
I have some div like:
<div class="topImg">
<div class="topImgIcon">
<img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
</div>
</div>
And I want to insert this img link with one icon within this div. Is one X to close the windows but show some html code like form.
See my jQuery code:
var myDivImg = $( "<div class="topImg"></div>" )
$(document).ready(function() {
$("#maisinfo").before(myDivImg, '<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$("#maisinfo").hide();
$("#show").bind("click",function(){
$("#maisinfo").slideToggle("slow");
return false;
});
});
I want to insert the html: <a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a> within .before() inside the div topImg in my HTML. I try create the div inside .before() but, jQuery create other same div.
Someone can help me please and make some explanation for I understand what I did wrong?
If you want to add something inside the DIV, you use .prepend() or .append(), depending on whether you want it at the beginning or end. .before() puts it outside the DIV, right before it.
$("#topDiv").prepend('<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$(document).ready(function() {
$(".topImg").append("<div id='maisinfo'></div>");
$("#maisinfo").before('<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$("#maisinfo").hide();
$("#show").bind("click",function(){
$("#maisinfo").slideToggle("slow");
return false;
});
});
</script>
<div class="topImg">
<div class="topImgIcon">
<img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
</div>
</div>
You could insert the div with ".html('xxx')" or with .append/prepend('xxx').
$(document).ready(function() {
var myDivImg = $( "<div class="topImg"></div>" );
// or var myDivImg=$('.topImg'); // => if the element exists
var myInsertDiv='<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>';
// first method
myDivImg.html( myInsertDiv ); // replace all html in this div with the content from "myInsertDiv"
//second method
myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as last child in your "myDivImg"
//or
myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as first child in your "myDivImg"
});
EDIT:
to close your div use something like this
$('body').on('click','.imgclose',function(){
$('.topImg').slideUp('slow');//close your parent-main div
return false;
});
I wrote the following script that resets the the Iframe Source, removes a class (.play) and adds an image placeholder when .b-close is clicked. I got it to work but the problem is that I have multiple modals and I would like only like to affect the modal that's clicked. I figured that I should use the '$(this)' DOM element in order to achieve this.
<script>
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
$('.pretty-embed').removeClass('play').empty();
$('.pretty-embed').html(vidImgUrl);
$('.b-modal').click(); /// Just trying to close modal..... $.modal.close();
});
});
})(jQuery);
</script>
Here's is the the Modal that I will be calling. Keep in mind that there will be multiple modals, so I would only like to affect the modal that's clicked
<div id="element_to_pop_up" display: block;">
<a class="b-close">x</a>
<h3 class="pop-hd">Header</h3>
<p>Test Video</p>
<div class="pretty-embed play" data-pe-allow-fullscreen="false">
<iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&rel=1"></iframe>
</div>
</div>
The problem is in your $('.pretty-embed') selector which selects all the embed elements in all modals If I understood your problem correctly. To fix that take the id of the modal and prepend it to the selectors like below:
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
var parent_id = $(this).parent().attr(id);
// Prepend the parent id before the .pretty-embed selector
$('#'+parent_id+' .pretty-embed').removeClass('play').empty();
$('#'+parent_id+' .pretty-embed').html(vidImgUrl);
$('#'+parent_id+' .b-modal').click(); /// Just trying to close modal... $.modal.close();
});
});
Also you can use the same way you did it in the previous lines:
$(this).parent().find('.pretty-embed').removeClass('play').empty();
You can get the current modal with
var current_modal = $(this).parent().find('.pretty-embed');
Then remove the class play, and add your image like this:
current_modal.removeClass('play').empty();
current_modal.html(vidImgUrl);
See your complete code in this jsfiddle
So the first part of the code works fine as it should be, the two grid and list view loads in the views-div when clicked, however, I want a default view shown in the views-div using jquery, I tried loading using clone and prependto but it doesn't work. any suggestion on how to do this?
note: the content I'm loading from the backend has tags and ID's so if I use the html markup to show a default content in the views-div the content repeats. So I'm hoping if use jquery to load content, the repeating will not occur.
here's a demo http://jsfiddle.net/soulsurfer/eta0uyye/
$(document).ready(function() {
$('.iw-grid-select, .iw-list-select').on('click', function() {
var aID = $(this).attr('href');
var elem = $('' + aID).html();
$('#iw-grid-view').fadeOut("slow", 1000);
$('#iw-listview').fadeOut("slow", 1000);
$('#iw-views-div').html(elem);
});
$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
});
The simplest solution could be is to trigger a click event
$(document).ready(function() {
$('.iw-grid-select, .iw-list-select').on('click.view', function() {
var aID = $(this).attr('href');
var elem = $('' + aID).html();
$('#iw-grid-view').fadeOut("slow", 1000);
$('#iw-listview').fadeOut("slow", 1000);
$('#iw-views-div').html(elem);
}).first().trigger('click.view');
});
.iw-listview,
.iw-grid-view {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iw-filter-col ">
grid view link
list view link
</div>
<div class="row iw-listing-view-row">
<div class="iw-grid-view" id="iw-grid-view">Grid view content</div>
<div id="iw-listview" class="iw-listview">list view content</div>
<div class="iw-views-div" id="iw-views-div">Content loading column</div>
<div id="loading"></div>
</div>
I know that this has been resolved, but just in case anyone was wondering where OP went wrong, I have a theory.
This:
$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
Should be changed to this:
$( "#iw-grid-view" ).find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
If the .iw-grid-list-col element was an immediate child of #iw-grid-view, then find() wouldn't have found it when called on the return value of contents(). This is because find() searches through descendants of elements. The return value of contents(), in this case, would have included the .iw-grid-list-col element and find() would not have found it since it was a member of the array that find() was called on, rather than a descendant of a member of the array.
Removing contents() from that chain of function calls allows find() to search all of the descendants of #iw-grid-view instead of just the descendants of its immediate children.