I have a facebook bubble notification. If the user would click the View All messages, the messages tab should be opened. How can I achieve this?
this is what I've tried:
<script>
$('.view_applications').click(function(){
$( "#tabs" ).tabs("select", "#tabs-5" );
return true;
});</script>
<div class="bbbbbbb" id="view<?php echo $id; ?>">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
View all <?php echo $comment_count; ?> application/s
</div>
</div>
But it's not displaying the desired tab. Any help is appreciated. Thanks.
You haven't initalized the DOM ?
$(document).ready(function(){
// do your work here
$('.view_applications').click(function(){
$( "#tabs" ).tabs("select", "#tabs-5" );
return false;
});
});
EDIT :
First initialize your tabs when document is ready :
$('#tabs').tabs();
then select your desired tab :
$('.view_applications').click(function(){
$( "#tabs" ).tabs("select", "#tabs-5" );
return false;
});
-----see the return false; ----------
Related
I'm developing the news feed by using jquery and php. I'm using 2 div for this.
Here If the main div reached at the bottom It should wrap automatically.
<html>
<div id="main">
<?php
for($i=0;$i<15;$i++)
{
?>
<div id="sub">hai</div>
<?php
}
?>
</div>
</html>
Script:
<script src="at/js/jquery.js"></script>
<script>
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
</script>
Style:
<style>
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
}
</style>
You can solve this using CSS clear:left; and float:left; property.
Check this demo jsFiddle
HTML
<div id="main">
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
</div>
CSS
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
clear:left;
float:left;
}
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
Also you can solve dynamically assign css property,
Check this demo jsFiddle
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
$("#sub").css({
border: "solid 2px #000000",
height: "30%",
width: "20%",
clear: "left",
float: "left"
});
}
});
Use prependTo jQuery function instead of appendTo
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.
I'm doing a little experimenting with using php for loops to generate a massive amount of divs that can be altered through JQuery changes to their css. The riddle I'm trying to solve right now is generating a checkerboard, a series of square black and white divs, which upon click will swap colors. I'm having trouble wrapping my brain around how the onClick event is looking at the situation.
Here is where I got stuck
<!DOCTYPE html>
<html>
<head>
<style>
.yes { background: black;
height: 50px;
width: 50px;
float: left;
}
.no { background: white;
height: 50px;
width: 50px;
float: left;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<?php
$j = 0;
for($i = 0; $i < 100; $i++){
if ($j == 0){
echo "<div class = 'yes'>yes</div>";
$j++;
}
if ($j == 1){
echo "<div class = 'no'>no</div>";
$j--;
}
}
?>
<script>
var bw = 0;
$(".no, .yes").one( "click", function () {
if (bw == 0){
$(".no" ).css( "background-color","black" );
$( ".yes" ).css( "background-color","white" );
bw++;
}
else {
$(".no" ).css( "background-color","white" );
$( ".yes" ).css( "background-color","black" );
bw--;
}
});
</script>
</body>
</html>
Some weird shift is going on where clicking some divs trigger the color change and other don't.
If you guys have any interesting ideas please share.
try
<script type="text/javascript">
$(document).ready(function(){
var bw = 0;
$(".no, .yes").click(function () {
if (bw == 0){
$(".no" ).css( "background-color","black" );
$( ".yes" ).css( "background-color","white" );
bw++;
}
else {
$(".no" ).css( "background-color","white" );
$( ".yes" ).css( "background-color","black" );
bw--;
}
});
});
</script>
whe you use one()
Attach a handler to an event for the elements. The handler is executed at most once per element
http://api.jquery.com/one/
$(document).ready(function(){
$('div').click(function()
{
$('div').each(function()
{
if($(this).hasClass('yes'))
$(this).addClass('no').removeClass('yes');
else
$(this).addClass('yes').removeClass('no');
});
});
});
check this too
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
}
});