after appending some data in an iframe using JQuery i need to reload the appended data. the data contains some script tags.
this is an example of the code i appended to an iframe. the div will apear into the iframe but the script won't work. the alert i added appears but for some reason the JQuery code won't transform the div into a dialog.
I said maybe it's because i should reload the appended data in this iframe. is it possible?
<style>
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
#snaptarget { height: 140px; }
</style>
<script type="text/javascript">
$(function() {
window.alert("TEST dialog1");
$( "#dialog1" ).dialog({ title: "Notifications Widget" });
$( "#dialog1" ).dialog( "option", "position", [200,200] );
$( "#dialog1" ).dialog().parents(".ui-dialog").draggable("option", "snap", true);
});
</script>
<div id="dialog1" class="draggable ui-widget-content">
<p>I am a notification widget</p>
</div>
thanks for helping
the alert i added appears but for some reason the JQuery code won't
transform the div into a dialog.
Alert appears, so your script is actually added and works fine. Remember that you must have jQuery, jQuery UI, css or what ever else required for your code to work correctly being linked inside iFrame just like . It has no direct access to parent window code. You may think about it like another browser tab/window.
Related
i created a like system where user can like a post of another user.. the data was inserted to my db. my only problem was i dont have any idea on how to stay the like button if the user like the post.. cause what happen is when the user like the post and refresh the page the button also refresh/back to unlike
this is what it looks like the default icon of my button is gray. when user hover the button it runs the animation and when the user hit like it should turn to red. but since when the user hit the like button i run the reload page the button returns to gray.. i think im missing something but i dont have any idea how to do it.....
CSS
.coracao{
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png");
height: 50px;
width: 50px;
background-size: 2900%;
background-position: left center;
top: -30px;
left: 0px;
position:absolute;
}
.coracao.ativo{
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png");
height: 50px;
width: 50px;
background-size: 2900%;
background-position: right center;
top: -30px;
left: 0px;
position:absolute;
animation: none 0s !important;
-moz-animation: none 0s !important;
}
.btn:hover .coracao{
animation: animationFrames 1.4s steps(28) infinite;
}
#keyframes animationFrames{
100%{
background-position: -2800px ;
}
}
i think i need to make some condition here i just dont have any idea on what to do...
this is the button
<div class="btn like">
<div class="boxcoracao">
<span class="coracao" name="like"><br> Love</span>
</div>
</div>
this where i insert the data of the user and the post id
<script>
$(".like").click(function(){
if ($('.boxcoracao .coracao',this).toggleClass("ativo")){
togglePost("like"); // run function
} else {
// update the text to show what the next click would be
togglePost("dislike"); // run function
}
function togglePost(action){
$.ajax({
type: "post",
url: "",
data: "",
success: function(data){
window.location.reload();
},
error: function(e){
alert("please try again...");
}
});
}
});
</script>
When you query for all of the posts, you need to also pull the 'like' state of the post by doing a join on the active user's likes, and then setting the content of the like button based on that flag.
I'm your example, there is no PHP to process the page when it is loaded. What you are asking for is functionality that is only possible by using a server side script that processes the output of the page based on the contents of a database.
Research PHP web applications. This is not achievable with pure JS, HTML, and CSS.
I'm changing the opacity of a class by using the jQuery hover function.
Note : I'm not using the
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$(".thumbnail_image_related_project .transparent_font").css({'opacity' : '0'});
$(".thumbnail_image_related_project").hover(
function(){
$(this).children(".transparent_font").stop().animate({'opacity' : '0.7'}, 300);
},
function(){
$(this).children(".transparent_font").stop().animate({'opacity' : '0'}, 300);
}
);
});
</script>
This code is working perfectly on a laptop but not on a smartphone.
The problem: When I clicked on the element, the animation is working and I'm going to next page. But, when I going back to the previous page, the opacity of the element isn't initialised.
Does some one know why?
Here is my php code:
<a href="http://192.168.0.11/next-page/" title="blabla">
<div class="thumbnail_image_related_project">
<h2 class="transparent_font">Text and the white background</h2>
<div id="image">
<img width="300" height="173" src="http://192.168.0.11/blabla.jpg"/>
</div>
</div>
</a>
here is my css:
.thumbnail_image_related_project .transparent_font{
line-height: 1.25em;
position: absolute;
top: 0;
left: 0;
color: black;
background-color:white;
width: 100%;
height: 100%;
opacity:0;
}
Are you using jQuery or jQuery Mobile? The reason I ask is that on mobile, it is likely a touchstart event not hover. jQuery Mobile may convert touchstart into hover.
Take a look at this: jQuery hover event on tag on mobile devices.
Language: PHP and jQuery
What I'm trying to do is pop up a dynamic link when a user clicks on it.
I don't want the page to be opened in a new window though, but in a modal one which overlays on the current page.
So with javascript, when a user clicks on this link, the action is to find the link's attr href and make a code for THAT link to be inside an iframe within the modal window.
The HTML with dynamic PHP link:
<img src="./img/Facebook.png" style="float: right; margin-top: 0px;" title="Share on Facebook" alt="Share on Facebook" id="<?php echo $rows['id']; ?>">
The jQuery script:
var makePop = function() {
link = $(this).attr('href');
return '<div class="the_box" id="box" style="display: block;"><a class="boxclose" id="boxclose"></a>
<iframe src="' + link + '" height="500px" width="600px" id="" name="iframe"></iframe></div>';
} // End of Function.
$("a.fblink").click(makePop);
I don't know how to make this happen... This is not working.
Anybody? :o)
There's no point returning a string from an event handler function, it won't do anything.
You need to actually create the modal window. Try jQuery UI for this.
The following should provide what your looking for. However would need to consider issues such as same origin policy for the XHR 'load' call.
See example at: http://jsfiddle.net/qeXea/2/
Note: Due to same origin policy the iframe isn't able to populate with the content, simply setup your own page on your website and use your own urls to view.
HTML
Click Here
<div id="fade"></div>
<iframe id="dialog" src=""></iframe>
<script type="text/javascript">
function launchUrl(owner) {
$('#fade').show();
var link = $(owner).attr('href');
$('#dialog').load(link, function(response) {
$('#dialog').show();
});
}
</script>
CSS
#fade {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
}
#dialog {
top: 100px;
left: 100px;
width: 200px;
height: 200px;
z-index: 101;
display: none;
position: absolute;
}
Alternative
HTML
Click Here
<div id="fade"></div>
<iframe id="dialog" src=""></iframe>
<script type="text/javascript">
function launchUrl(link) {
$('#fade').show();
$('#dialog').load(link, function(response) {
$('#dialog').show();
});
}
</script>
I have a div that is being refreshed after a user click on a link.
Here's my CSS for that Div:
#groups_wrapper {
height: 150px;
width: 250px;
overflow: auto;
overflow-x: hidden;
}
Here's my Jquery:
<script type="text/javascript"><!-- AJAX CALL FOR MY GROUPS -->
$(document).ready(function() {
$('a.delete_group').live('click', function(e){
$('#groups_wrapper').load( $(this).attr('href') + ' #groups_wrapper', function() {
$(".item_control_box").hide();
jQuery('.each_item_container').hover(function() {
jQuery(this).find('.item_control_box').show()
}, function() {
jQuery(this).find('.item_control_box').hide();
});
});
e.preventDefault();
});
});
</script>
Here my html:
<a href='delete.php?id=x' class='delete_group'>Delete Group</a>
The issue I'm running into is that when the user clicks on the Link to delete a group, the div refreshed but is unable to scroll up and down on the particular div, I have my CSS set to
overflow: auto;
overflow-x:hidden;
Any ideas why this would be breaking?
Try changing the line:
overflow: auto;
To:
overflow-y: scroll;
Hey guys I have a drag and drop function that does not fully work. What I want to do is be able to drag and drop a picture into a div and have that picture pop up in the div. I have a list of 2 pictures right now, so I have the following function echoed for each picture. Both pictures are draggable and droppable, but the first one is the only one that appears in the div, regardless of which picture gets dragged in. I am not sure what is wrong because the jquery function seems to be unique to each picture. If any one has any suggestions I would appreciate it greatly.
while ($row = mysql_fetch_assoc($query)) {
$image=htmlentities($row['image']); //image name
$uniqid=uniqid(); //unique id for jquery functions
$dirname = "usercontent/$user/images/$image";
echo "<img id=\"$uniqid\" src=\"$dirname\" width=\"75\" height=\"75\"/>";
echo "<script>
$(function() {
$(\"#$uniqid\").draggable({ scroll: true, scrollSensitivity: 10, scrollSpeed: 10, revert: true, helper: 'clone', cursorAt: { cursor: 'move', top: 27, left: 27 } });
$(\"#droppable2, #droppable-background , #droppable2-innerer\").droppable({
greedy: true,
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
$('#droppable-background').css(\"background-image\",\"url($dirname)\");
}
});
});
</script>";
}
Don't use the ID to set up a draggable item, it is best to just use a class you can put on all of them. From the code above it appears that you are using a single ID, maybe that's why only one picture works? And are you setting up 3 drop zones?
I set up a working demo and I added a bunch of comments to help you see how this could be done.
CSS
#draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd; }
#droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ccc; }
.dragme { background: #999; text-align: center; width: 100px; padding: 5px; }
.fade { opacity: 0.3 }
.ui-state-highlight { border: #333 1px solid; }
HTML
<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag from here</p>
<div class="dragme"><img src="image1.gif"><br><span class="caption">Drag me to my target</span></div>
<div class="dragme"><img src="image2.gif" height="100"><br><span class="caption">Drag me to my target</span></div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script
$(document).ready(function(){
// set up the draggable items
$(".dragme").draggable({
helper : 'clone', // you will drag a copy of the item around
revert : true, // draggable returns home if released
start: function(e,ui){
$(this).addClass('fade'); // fade out original item while dragging the clone
ui.helper.find('.caption').text("I'm being dragged!"); // message in clone
},
stop: function(e,ui){
$(this).removeClass('fade'); // remove fade if dragged item is released
}
});
$("#droppable").droppable({
drop: function(e, ui) {
$(this).addClass('ui-state-highlight'); // add drop box highlight (border)
ui.draggable.appendTo($(this)).removeClass('fade') // move item to drop box & un-fade
.find('.caption').text("I've been dropped"); // change caption
ui.helper.remove(); // remove clone
}
});
})
Edit: Hiya, if you look at the overview page of the Draggable and Droppable document page, you will see that the plugin defines extra variables (actually they are jQuery objects) for you: "ui.draggable" is the selected draggable element & "ui.helper" is the clone of the object.
I have updated the demo with what you requested.. it should now place the image as the background of the drop box. Here is just the updated portion of the script:
$("#droppable").droppable({
drop: function(e, ui) {
$(this).addClass('ui-state-highlight'); // add drop box highlight (border)
var src = ui.draggable.find('img').attr('src'); // get img URL
$('#droppable')
.css({
backgroundImage : 'url(' + src + ')', // set background image
backgroundPosition : 'center center', // position background image
backgroundRepeat : 'no-repeat' // don't repeat image
});
ui.helper.remove(); // remove clone
}
});