Using "draggabilly" to create draggable spans - javascript

So far on this piece of development I have built this page. As you can hopefully see, it suggests dragging the words on the right sidebar into the slots: http://francesca-designed.me/create-a-status/index.php
The words are pulled from a PHP array, and pressing the button loads some new ones in using AJAX.
I'm trying to implement Dragabilly as it has the functionality and look I want: http://draggabilly.desandro.com/
But I'm running into problems using it. To define which items are draggable, I need to add class="draggie" to each of those spans.
Here is the code that creates my spans:
<div class="words one">
<?php foreach (array_rand($poolOne, 4) as $key) {
echo "<span>".$poolOne[$key]."</span>";
}?>
</div>
So, to make this work I added the "draggie" classname:
echo "<span class="draggie">".$poolOne[$key]."</span>";
However, I have no idea why, but this breaks the WHOLE page. It seems that it can't call in the AJAX any more. But I am not sure, why would adding a simple classname to some PHP cause the whole page to break?
Here is a duplicate of the site code shown in the first link but with the addition of class="draggie" - you'll see that the page just shows up blank. Everything is the same apart from the addition of the draggie class.
http://francesca-designed.me/create-a-status/index2.php

I don't know if this would kill the entire page, but you're trying to nest double quotes.
echo "<span class="draggie">".$poolOne[$key]."</span>";
If there isn't something in PHP-land with the name draggie, PHP will throw an error and quit rendering.
I'm guessing that you have errors turned off, too.
You can either replace the double quotes around draggie with single quotes (class='draggie'), or escape the inner set of double quotes (class=\"draggie\"). I'd recommend just switching to single quotes.

Related

Can I hide a specific character (,) from the browser?

Complete noob here.
The CMS I'm forced to use is spitting out commas (,) on a page and I want to hide them from the viewer as they are messing up my layout.
The code (that I CANNOT edit) typically looks like this:
<img class="" src="https://via.placeholder.com/350x150"> , <img class="" src="https://via.placeholder.com/350x150"> , <img class="" src="https://via.placeholder.com/350x150"> ,
I can however wrap the above html in a div. I can also add and javascript or jquery to either the header or footer of the page. The page contains multiple instances where there are blocks of images- sometimes I might have 4 or 5 images together - all are currently being comma separated. These commas are appearing in the browser and it's these that I want to remove.
A working demo where these commas are removed would be amazing. Thanks all who read this.
Not the prettiest solution but I think you can get the point. Just strip the commas from the contents of the div, since you said you can do that.
container.html().replace(/,/g, "")
Example on JSFiddle

Prevent Javascript Injection in data attribute

I have a script that pulls a text from an API and sets that as a tooltip in my html.
<div class="item ttip" data-html="<?php echo $obj->titleTag;?>">...</div>
The API allows html and javascript to be entered on their side for that field.
I tried this $obj->titleTag = htmlentities(strip_tags_content($this->channel->status)));
I now had a user that entered the following (or similar, he is blocked now I cannot check it again):
\" <img src="xx" onerror=window.location.replace(https://www.youtube.com/watch?v=IAISUDbjXj0)>
which does not get caught by the above.
I could str_replace the window.location stuff, but that seems dirty.
What would be the right approach? I am reading a lot of "Whitelists" but I don't understand the concept for such a case.
//EDIT strip_tags_content comes from here: https://php.net/strip_tags#86964
Well, It's not tags you're replacing now but code within tags. You need to allow certain attributes in your code rather than stripping tags since you've only got one tag in there ;)
What you wanna do is check for any handlers being bound in the JS, a full list here, and then remove them if anything contains something like onerror or so

Replacing to HTML Character Entities and reverting back

When replacing things in my chat room it comes up in the box as the 'HTML Character Entities'. However, I want it to revert back and actually show the character typed in when it is then shown in the chat room. So I am using the following code to stop any html from being entered and damaging the chat room by replacing certain html character with there entities (I want to get one or two working before I look at the others I know there are many more.) ....
Javascript
var str1 = this.value.replace(/>/g, '<');
if (str1!=this.value) this.value=str1;
var str2 = this.value.replace(/</g, '>');
if (str2!=this.value) this.value=str2;
and then the following code then displays the text after it has been entered into the database etc. and on updating the chat box it uses the following to add in the the updated messages ...
Returned from php and then displayed through the following javascript
$('#chatroomarea').append($("<p>"+ data.text[i] +"</p>"));
I have messed around with this a few times changing it to val and using
.html(.append($("<p>"+ data.text[i] +"</p>")));
Etc. But I have had no luck. I'm not quite sure how to do this I just need the HTML Character Entities to actually show up back in there true Character instead of displaying something such as... '&#62'
This might be something I need to actually put within the replacing code where it will include code of it's own on replacing such as (this is just an example I'm not exactly sure on how I would write it) ....
var str1 = this.value.replace(/>/g, '.html(<)');
Any help on this would be much appreciated, Thank you.
$('#chatroomarea').append($("<xmp>"+ data.text[i] +"</xmp>"));
HTML xmp tag
The use is deprecated, but supported in most browsers.
Another option will be to use a styled textarea , To my knowledge these two are the tags that doesn't bother rendering html tags as it is.

Javascript inner.HTML not usable with a function - create moveable divs

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.)

Inserting smilies into div with jQuery

I'm working on some small chat application. I want to implement smilies over there so when i click on some smiley it will appear in textarea where user enters his message and when user clicks on select i want smilies to appear in div that contains the conversation.
After some workarounds i got to idea that replacing textarea with div contenteditable="true"
doesn't work that well so i did wrap certain smiley name with ':' like :wink: in textarea but still i need to replace :wink: with real span containing image as background.
Problem is i don't see a way to make this dynamically but doing each one by one.
for example:
if ($('.line:contains(":wink:")').length > 0) {
var oldLineHTML = $('.line:contains(":wink:")').html();
$('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));
I have plenty of smilies so doing this very resource expensive function will costs me much and also will cause me lots of problems during maintenance.
How can i do that dynamically? Or maybe you have better solution which will require to re-design... I'm up to it if it is required.
thanks
}
var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));
My suggestion is read every string that is wrapped by colons :[something]:, then convert it into span. So that you don't have to define every smile, and it is easy to maintain.
If you are doing this on page load, then you can do this in a $(document).ready(). Then you can use selector that you have $('.line:contains(":wink:")') and use the $each operator to loop over each one and perform the update. This will cover you for the page load. But if you refactor that $each code into a method, then you can call it each time the text is updated. I think this will give you the best in both cases. Something like this:
function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
//Replace the wink here
});
}
$(document).ready(function(){
replaceWinks();
});
I would recommend replacing the winks server side for the page load though. It will be more performant. Also it will avoid content that changes when after the first view.
Jeaffrey Gilbert's idea is good, but I have another one that may be interesting:
write down you winks the way you want(let's say [SmileName]), and when processing the text with jquery, read every one of them, and replace the [ with <div class=" then replace the ] sign, with "></div>, this way, you will end up like this:
using these smilies:
1- [smile]
2- [wink]
3- [shy]
will lead to the following markup
1- <div class="smile"></div>
2- <div class="wink"></div>
3- <div class="shy"></div>
and using CSS, you will give every class of them, a different background image, which is the smile image.
by utilizing this method, every div will lead to displaying your smilies, and you will write the code once, and end up using it wherever you want, without repeating yourself

Categories

Resources