I want to take a list of users from a database, show their name in a table and when you click on a name, a special div apeears with his details, you can move this div and even close it.
Here is a short scheme how the code is written:
function openDiv(id){
document.getElementById('divsHere').innerHTML +='<div id="moveable'+id+'">content</div>'}
<?php database connection... while{
...
<tr onclick='openDiv( ". $row['id'] ." )'>
$script += 'Drag.init(document.getElementById("moveable'+ $row['id'] +'"));'
...
}?>
<div id="divsHere"></div>
echo $script;
I've used this awesome drag'n'drop library.
http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm
(note I have the same problems with jQuery)
It seems the drag'n'drop function doesn't work, when the div was addad by inner.HTML. However, I don't see any onther way around.
Thank you for any advice!
The problem is when you execute Drag.init the div you feed it is not yet created.
I sugest you generate the individual divs inside a php cycle, just like you do for the th tags, remove the setting of the innerHTML you have at the beginning of openDiv, and it'll work.
I have to say though, it seems like what you want is a modal dialog which you can find already made and easy to use elsewhere. For example: http://jqueryui.com/dialog/ It'll both be easier to work with and your likely to enjoy the final result more.
I hope this helps :)
Try adding the div using document.createElement:
var newDiv = document.createElement('div'),
textNode = document.createTextNode('content');
newDiv.id = "moveable" + id;
newDiv.appendChild(textNode);
document.getElementById('divsHere').appendChild(newDiv);
and to initialise the dragging simply do
Drag.init(newDiv);
provided that part of the code where you want to initialise the dragging has newDiv within its scope.
(Probably you want to create the div and initialise the possibility of dragging it in the same place. If I've understood your scheme right, then the problem is that it first tries to initialise dragging on non-existent divs, then only when the user clicks on a row, calling the function openDiv, are those divs created. If this is right then to fix it, you need to make sure the dragging is only initialised after the div has been created.)
Related
I am writing this code here inside my HTML and I am trying to access the information in order to show and hide the information on the functioning website.
I have only been learning to code for less than a month and a half so I am unsure of whether or not this code creates another DIV inside the HTML.
If it does, how can I access this on CSS? I tried different methods to see if this would show up, but at this point, I believe it does not create anything new inside my HTML Body.
*var $tweet = $('<div class="tweet' +tweet.user+'"></div>');
you are creating an element but you are not appending it to anything.
var tweet = ('<div class="tweet' +tweet.user +'"></div>');
$('body').append(tweet);
you can change the 'body' to a different selector
I am trying to make a reference tag toggle bold when clicked. I know there are many examples online and i tried most of them but i keep getting this error:
Uncaught TypeError: Cannot read property 'click' of null
I am writing everything in PHP (I have my reasons) and here is the code:
print "<script type=\"text/javascript\">\n";
echo <<<JS
$(".boldtrigger").click(function(){
$(".boldtrigger").toggleClass("bold");
});
JS;
/*Now for Html Part*/
echo "<tr class = 'oddkill' ><td class = 'entry_cell' ><a href = \"javascript: displayRow('context_row_${row_paridy}') \" class = 'boldtrigger' style = 'color:black'>$test</a></td>";
I have the css in another file:
.bold {
font-weight: bold;
}
I don't understand why it thinks that the 'boldtrigger' class doesn't exist. Can someone help?
Firstly, nothing you're asking about is "in PHP".
PHP is a server side language. It's generating HTML and Javascript for your browser - but aside from that it's completely irrelevant to your problem and your question.
Now, to solve your problem
You trying to attach a listener to an element that isn't rendered yet:
$(".boldtrigger")
This looks for an element whose class is boldtrigger, and tries to do stuff with it. But, your element is only rendered after this bit of code.
There are two fixes:
1. Event delegation
Using the following code:
$('body').on('click', '.boldtrigger', function(){
$(".boldtrigger").toggleClass("bold");
});
You can attach a listener on the body who will wait for events to bubble up from .boldtrigger. This can work when you need to attach events before elements are on the scene.
Read more about the idea of event delegation here
Check out more about jQuery.on() here
2. Re-order your code
The other option is to move your JavaScript to the bottom of the page, or at least below your HTML:
<?php
print "<script type=\"text/javascript\">\n";
echo "<tr class = 'oddkill' ><td class = 'entry_cell' ><a href = \"javascript: displayRow('context_row_${row_paridy}') \" class = 'boldtrigger' style = 'color:black'>$test</a></td>";
/*Now for Js Part*/
echo <<<JS
$(".boldtrigger").click(function(){
$(".boldtrigger").toggleClass("bold");
});
JS;
3. $(document)ready()
Nearly any time you use jQuery you want to wrap it in a function that looks like this:
$(document).ready(function () {
// Some code
});
Or this:
$(function() {
// Some code
});
You probably want to brush up on some jQuery basics if you aren't aware of that.
Or, better yet - start with plain old Javascript!
If you believe that jQuery is easier than plain/vanilla Javascript - you might be in for a surprise. It's 2016 and we have tons of great new APIs that make plain old Javascript pretty cool.
In other words:
You really don't need jQuery
As an aside
You maybe want to change your JavaScript code. Right now, every occurence of .boldtrigger will toggle that class whenever you click any of them.
If you want to toggle only the element being clicked, you might want something closer to this:
$(this).toggleClass("bold");
Read more about this keyword here
I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.
I have a div that will appear on the page at a separate point. It doesn't always appear on the page and can be added via a CMS if needed. There's a line of text that will appear within the body. If the user has decided to have this div added, it would need to be moved into position via jquery. So, I have this text:
<p><strong>Key Facts:</strong></p>
I want to find it using jquery, then move the other div in front of it. I tried a couple of different ways to select this text then move the div in front of it and haven't had any luck. The best way I found to find the text was to do this:
var foundin = $('*:contains("<p><strong>Key Facts:</strong></p>")');
From that point, to move the div into position, I thought I could something like this:
$('#DivIWantToMove').insertBefore($foundin);
That didn't work, though. I also looked at this:
$( $foundin ).before( $('#DivIWantToMove') );
AS you might imagine, since you're reading this, that didn't work either. So, I'm asking you, is it possible to do what I want? I'm fairly constrained by the CMS that we are using. The DIV I need to move will always be someplace on the page and I have to move it. The client doesn't want to have to add a class to <p><strong>Key Facts:</strong></p> so I'm let with this. If I could have a class on <p> then it would be super easy. I've already done it. The client doesn't like having an extra step. Any ideas?
I think contains selector only looks for text, not html tags. so you have to modify your contains selector. if your html is like this -
<div>
<p><strong>Key Facts:</strong>
</p>
</div>
<div id="move">something something</div>
and you want to move your <div id='move'> in front of p, then try this -
var foundin = $('p:contains("Key Facts")');
var divtomove = $('div#move');
foundin.before(divtomove);
Demo
Update also look into this QA: jQuery :contains with html. Instead of using contains you can use one of the methods from there.
Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');
This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?
Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.
empty() is always an option
jQuery('#main').empty();
Give a look at the empty() function.
It might better solve the problem. Here's the link http://api.jquery.com/empty/
I'd just set and clear the html with '.html()' ...
-- edit
to be more clear, have an area layed out specifically for the addition of these comments:
<div id='commentarea1'></div>
etc.
Try:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');
then later
$('#id .appended').fadeOut('slow'); // or whatever you want to do.
It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).
The following assumes each comment goes inside its own div that has a class comment.
$('#id>div.comment:gt(4)').remove();