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;
Related
In Wordpress, I wanted to duplicate the images of the posts, so I can set one of them as background, and then blur it, creating a nice effect, without having to change all my html structure.
How can I do that, if possible, with PHP? I tried long time ago to achieve with JQuery, but at that time I didn't manage to make it:
$(".post-cover").each(function(){
var img = $(this).find("img");
$(this).css({
"background-image": "url('"+img.prop("src")+"')",
//Any other CSS background propriety
//If your div don't have a fixed width and height
width: img.width(),
height: img.height()
});
img.remove();
});
If I used Jquery, where should I implement it?
My structure is
<div class="post-cover">
<img src="#"/>
</div>
and the final result should be something like:
For this to work you need to set the img source as the background of the container div and blur it. However, as this will blur all child elements, you will need to move the original img element outside of the .post-cover and position it absolutely so that it is still sharp. Try this:
$(".post-cover").each(function() {
var $cover = $(this);
var $img = $cover.find("img");
$cover.css({
backgroundImage: "url('" + $img.prop("src") + "')",
width: $img.width(),
height: $img.height()
});
$img.insertAfter(this).css({
position: 'absolute',
top: $cover.offset().top,
left: $cover.offset().left
})
});
.post-cover {
-webkit-filter: blur(10px);
filter: blur(15px);
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
<img src="https://i.imgur.com/mE2HyxV.jpg" />
</div>
Could be like this:
$( document ).ready(function() {
$('.post-cover img').each(function() {
$(this).before('<img src="'+ $(this).attr('src')+'" class="blur">');
});
});
.post-cover {
position: relative;
}
.post-cover img {
width: 250px;
height: auto;
display: block;
position: relative;
padding: 50px;
}
.post-cover img.blur {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-filter: blur(25px);
filter: blur(25px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
<img src="https://placeimg.com/640/480/arch">
</div>
<html>
<head>
<style>
.messboxcontent { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
.mess_name {display: inline-block; cursor: pointer ; vertical-align: middle; width:165px; height:35px; background:blue; bottom:0px; left:144px; margin-right: 16px}
#msg_holder {overflow-x:scroll ;overflow-y: hidden; white-space: nowrap; position:fixed;height:110px; width:100%; background-color:yellow; bottom:0px;}
</style>
<script type="text/javascript" src="jquery.js" ></script>
<script>
$(document).ready( function() {
done();
});
function done() {
setTimeout( function() {
update();
done();
}, 20000);
}
function update() {
$.getJSON("fetch.php", function(data) {
$.each(data.result, function(){
var message = this['message'];
var name = this['name'];
call(name, message);
});
});
};
function call(name, message){
$("#msg_holder").append("<div class='mess_name'>" + name + "<div>");
$(".mess_test").click( function() {
$('div.messboxcontent').html(' name : '+ name + ' Message : ' + message);
$('div.messboxcontent').fadeIn();
return false;
});
}
</script>
</head>
<body>
<div class="messboxcontent"></div>
<div id="msg_holder"></div>
</doby>
</html>
and this is fetch.php file
{"result":[{"message":"this is haha","name":"haha"},{"message":"this is koka","name":"koka"}]}
when ever i click on a blue box that Contain any name, it show up the latest message and name. what i want is when i click on the box that contain haha as a name i want the box that contain message: this is haha,
You need to use append rather than html.
$('div.box').append( message );
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.
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>
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
}
});