I am using this way to show a popup div
Ask Question
when clicking on the anchor of class 'open-question-popup', several anchors share the same popup, so they all have the same anchor code, the problem is I want to send the title of each of the parent div to the popup (#ask-question-div) to be shown as a header when the corresponding anchor element is clicked.
Without relevant html shown here is a generic approach
$('.open-question-popup').on('clcik', function(){
// `this` is the `<a>` event occurred on
var title = $(this).closest('div').attr('title');// not clear where value should come from
$('#ask-question-div').find(someElement).text(title);//not clear where to put it
})
Related
I have a worked example for passing data from child window to parent window
this is the example :
http://www.plus2net.com/javascript_tutorial/window-child3-demo.php
but what I'm looking for is to pass data from div popup and not window popup
to parent form;
any idea ?
If the div popup is a modal window of some description, i.e. it is a div overlaying the current page but within the same document, then you can do so by listening for the click event on the modal button and when you see this click, taking the value of the input inside the modal.
Assuming your page setup is similar to the example in the link you posted, if you had an input with an id of input1, and a modal containing an input with id input2, and button with an id of button, then this would be a pure javascript method for achieving the effect you describe.
window.onload = function() {
document.getElementById('button').onclick = function(event) {
event.preventDefault();
document.getElementById('input1').value = document.getElementById('input2').value;
}
};
Here is a fiddle which shows the function working: http://jsfiddle.net/8Z7hg/
The key thing to remember is that you need a way to query the element which contains the data you want to capture (in this case I gave the input an id of 'input2', which I could query using document.getElementById('input2').value and a way to listen to the event which triggers you capturing the data - in this example I created an anonymous function which I bound to the onclick event of the element with an id of button
I have a list of data which is collected from the database.
I have added a Div with a "Read More" label and another div which holds the content and is hidden.
When the user clicks on the "read More" text the Content div with show up.
Here is my current code below:
<script>
$(document).ready(function(){
$(".readmore").click(function() {
$('.readmecontent').show();
});
});
</script>
//THE HTML .. Note: Content will be added via php but hardcoded now ...
echo '<div class="readmore">Read more...</div>';
echo '<div class="readmecontent" style="display:none;">Read Me Content Here</div>';
All the above works but the problem is that the "readmore" class currently opens all "readmecontent" classes.
I need it to just show the "readmecontent" DIV that applies to the "readmore" class that has been clicked.
I cannot use ID's because the listing is created dynamially.
How can I do this?
Use an instance of this to find the next element:
$(this).next('.readmecontent').show();
this solution doesn't need you to hold an instance
$(".readmore").click(function() {
$('.readmecontent:not(.readmecontent.visible)').eq(0).show().addClass('visible');
});
I have a form in a modal iframe window that i create using fancybox. Once the user submits the form then upon success i want to close the modal window and update a div on the parent window with a 'Saved Successfully' message.
How do i do this? I know how to close the modal and refresh the parent window in fancybox. However what i do not understand is how to send the 'Saved Successfully' message to the parent window and update a div with this message so user can see.
I am open to using any notification plugin if that will help.
Thanks,
Shakira
First, we need to create a function in the parent window that allows us to make modifications. Do not encase this function in a $(document).ready(function(){ or a $(function){.
function updateParent(msg){
$('#divStatusUpdate').html(msg);
}
Now we have a function which passes the paramter of 'msg' to the function. The function applies the contents of 'msg' to a div in the parent with an ID of divStatusUpdate.
Now we have an element that performs the event for us.
$("#element").on('click', function(){
window.parent.updateParent('This is a message from the iFrame to the Parent Div.');
});
Simply create the div with an ID of 'divStatusUpdate', add the above scripting, change #element to the ID or Class you want to use.
If problem is in changing top frame from iframe you can create function in top and call it from iframe
top.yourfunction();
or
parent.yourfunction();
I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:
<a href="#" onclick="popup('popUpDiv')">
The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.
I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:
<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">
... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.
This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.
Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?
FYI, this is the kind of popup box I'm working with:
http://www.pat-burt.com/csspopup.html
I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:
<iframe name="myfavoriteiframe">
Then:
This is a link.
P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:
<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&player_id=player_1">
I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.
Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.
Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.
<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">
Set the id attributes of the div elements appropriately.
Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:
function pre_popup(id) {
// Take the href parameter of the link
var href = this.href;
// And then use it in the iframe
window.frames["your_iframe"].src = href;
// And then pop it
popup(id);
}
i have a problem with my jquery code which is disabling all the text after i click the next profile.
Fig.1 : you will notice here that i can highlight the text and highlight the scrollbar in first frame.
Fig.2 : you will notice here that none of all are highlighted.
here's the jquery source that im currently using.
$(document).ready(function(){
$('.productList').hide(); // hide all details
$('#thumbsets li').bind('click',function() {
var tsLi = $(this).index(); // all elements have already an index
$('.productList:eq('+ tsLi +')').siblings().fadeTo(400,0).end().fadeTo(400,1);
});
});
i use this at all of my portfolio section. most of it are images. however, i tried to create a sample list of user profiles with this script function, but i found out that after my navigation switched to next profile member, it was already disabled (technically says, i can't scroll or highlight the text content).
is there possible way to adjust the script here? i doubt that the cause of my issue is:
var tsLi = $(this).index(); // all elements have already an index
$('.productList:eq('+ tsLi +')').siblings().fadeTo(400,0).end().fadeTo(400,1);
hope someone can help me about this. thanks in advance.
fadeTo docs manipulates only the opacity. So the faded elements become invisible but are still there and on top of the other elements.. (so you can not highlight those..)
you should use fadeIn docs and fadeOut docs instead, because those will also hide/show the element as well..
$('.productList:eq('+ tsLi +')').siblings().fadeOut(400).end().fadeIn(400);