inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 19, 2018 21:37:27 GMT -8
Thanks Todge, I think I know where to go from here. <script type="text/javascript"> $(document).ready(function() { function PosztokOldalt() { if $('.message').find('div') { document.write(" {foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach} "); } else { document.write(" <div id="side-post" class="post-list">{foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach}</div> "); } } $('#PosztokOldalt').click(function() { PosztokOldalt(); }) }; </script> Add the CSS which you had inline to the bottom of your stylesheet. .post-list { display: none; bottom: 20%; right: 3%; position: fixed; width: 18%; background-color: #000000; max-height: 60%; overflow: auto; border-radius: 6px; overflow-x: hidden; border: 1px solid #cccccc; }
|
|
inherit
229600
0
Sept 7, 2022 11:09:51 GMT -8
Ben Goodman
96
February 2016
benhun
|
Post by Ben Goodman on May 19, 2018 23:33:07 GMT -8
It is not working, the button does not trigger anything.
|
|
inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 20, 2018 0:52:45 GMT -8
Todge Now where have I gone wrong, I am totally lost now, (this is my first time doing javascript). What is the code you have for the button Ben Goodman ??
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on May 20, 2018 3:31:42 GMT -8
Thanks Todge, I think I know where to go from here. <script type="text/javascript"> $(document).ready(function() { function PosztokOldalt() { if $('.message').find('div') { document.write(" {foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach} "); } else { document.write(" <div id="side-post" class="post-list">{foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach}</div> "); } } $('#PosztokOldalt').click(function() { PosztokOldalt(); }) }; </script> ] Todge Now where have I gone wrong, I am totally lost now, (this is my first time doing javascript). First things first.. You have forgotten the last bracket to close document.ready function. Secondly, what are you trying to acheive?.. $('.message').find('div') will find all of the <div> tags inside the posts, but it does not check to see if they're there.. It simply returns an array containing all of the <div> tags it finds. There are various ways to check if these <div> tags exist, but one way is to check the length of that array.. So, instead of if $('.message').find('div') { try if $('.message').find('div').length > 0 {
|
|
inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 20, 2018 5:50:57 GMT -8
Secondly, what are you trying to acheive? <script type="text/javascript"> $(document).ready(function() { function PosztokOldalt() { if ($('.message').find('div').length > 0) { document.write( "{foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach}" ); } else { document.write( "<div id='side-post' class='post-list'>{foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach}</div>" ) } }; $('#PosztokOldalt').click(function() { PosztokOldalt(); }); }); </script> From the OP, but the problem was that if a post contained a DIV, it messed everything up, so the idea was to create something that would detect if a post contained a DIV and have an alternate version of fixed div next to the forum.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on May 20, 2018 8:55:31 GMT -8
Secondly, what are you trying to acheive? <script type="text/javascript"> $(document).ready(function() { function PosztokOldalt() { if ($('.message').find('div').length > 0) { document.write( "{foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach}" ); } else { document.write( "<div id='side-post' class='post-list'>{foreach $[post]}$[post.created_by]:<br /><br /><br />$[post.message]{/foreach}</div>" ) } }; $('#PosztokOldalt').click(function() { PosztokOldalt(); }); }); </script> From the OP, but the problem was that if a post contained a DIV, it messed everything up, so the idea was to create something that would detect if a post contained a DIV and have an alternate version of fixed div next to the forum. Any quoted post contains a <div>, so that could end up being a LOT of posts... Anyhow.. document.write() is not the way to go, you will need to either recreate the offending posts, or copy the content into a new cell. Also, the 'code' you are trying to use.. {foreach...} etc is not native JS, it's the coding used when editing the layouts, you will need each().. as in.. $('.message').find('div').each(function(){ your code here... });
|
|
inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 21, 2018 2:41:32 GMT -8
The script is no longer showing any errors in the console on my pc, (I have a web server on the pc) with the following added to the .htm file, (but I don't think you will need this on your forum). <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Now to get the button working.
<script type="text/javascript"> <!-- $(document).ready(function(){
function PosztokOldalt() { $('.message').find('div').each(function(){ document.write(" $[post.created_by]:<br /><br /><br />$[post.message] "); }); };
function PosztokOldalt() { !$('.message').find('div').each(function(){ document.write(" <div id=/'side-post/' class=/'post-list/'>$[post.created_by]:<br /><br /><br />$[post.message]</div> "); }); };
$("PosztokOldalt").click(function(){ $("PosztokOldalt").click(); });
}); --> </script>
|
|
inherit
229600
0
Sept 7, 2022 11:09:51 GMT -8
Ben Goodman
96
February 2016
benhun
|
Post by Ben Goodman on May 21, 2018 3:49:02 GMT -8
Still nothing happens, neither with or without the jquery included.
|
|
inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 21, 2018 5:04:54 GMT -8
Button now works, (in my test file) with the following code for the button <button id="run_code">Load Posts</button> Now Todge, how I get it to actually put the box up with the post info in it ?? <script type="text/javascript"> <!-- $(document).ready(function(){
function my_code() { $('.message').find('div').each(function(){ document.write(" $[post]}$[post.created_by]:<br /><br /><br />$[post.message] "); }); alert("Button Clicked"); };
function my_code() { !$('.message').find('div').each(function(){ document.write(" <div id=/'side-post/' class=/'post-list/'>$[post.created_by]:<br /><br /><br />$[post.message]</div> "); }); alert("Clicked Button"); };
$('#run_code').click(function(){ my_code(); });
}); --> </script>
|
|
inherit
229600
0
Sept 7, 2022 11:09:51 GMT -8
Ben Goodman
96
February 2016
benhun
|
Post by Ben Goodman on May 21, 2018 5:14:34 GMT -8
This is the result after i "OK" the alert:
|
|
inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 21, 2018 5:19:13 GMT -8
Just found that on my forum! Think the problem is the document.write():, only I am not sure how to generate the box at the side of the forum without it.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on May 21, 2018 13:02:55 GMT -8
Button now works, (in my test file) with the following code for the button <button id="run_code">Load Posts</button> Now Todge , how I get it to actually put the box up with the post info in it ?? <script type="text/javascript"> <!-- $(document).ready(function(){
function my_code() { $('.message').find('div').each(function(){ document.write(" $[post]}$[post.created_by]:<br /><br /><br />$[post.message] "); }); alert("Button Clicked"); };
function my_code() { !$('.message').find('div').each(function(){ document.write(" <div id=/'side-post/' class=/'post-list/'>$[post.created_by]:<br /><br /><br />$[post.message]</div> "); }); alert("Clicked Button"); };
$('#run_code').click(function(){ my_code(); });
}); --> </script> First, you have 2 functions with the same name.... function my_code() { $('.message').find('div').each(function(){ document.write(" $[post]}$[post.created_by]:<br /><br /><br />$[post.message] "); }); alert("Button Clicked"); };
function my_code() { !$('.message').find('div').each(function(){ document.write(" <div id=/'side-post/' class=/'post-list/'>$[post.created_by]:<br /><br /><br />$[post.message]</div> "); }); alert("Clicked Button"); };
In this case, the last function with that name (the re one) will overwrite any previous functions, so the blue one will essentially not exist, and so will never be run. You need to check each post to see if they contain any <div> tags and then run whichever part of the code is required depending on the outcome, both from within the same function... function my_code() { $('.message').each(function(){ if($(this).find('div').length > 0) { Code to run if post contains a div tag.. } else { Code to run if post does NOT contain any div tags.. } }); };
As I mentioned before, document.write() is not the way to go to add content to a preloaded page.. It will work with some things, for instance, you can write a stylesheet to a page, but to add content you will need to create the cells and add them to the page, then you can populate ( .append()) them with the relevant content. To create a tag of pretty much any type you can do this... var div = $('<div></div>');
You can then add attributes, classnames etc. to it 'inline'.. var div = $('<div></div>').attr('id','side-post').addClass('post-list');
You can then insert your cell into the page with .append()... The way you are trying to use document.write(), it would be adding content to the very bottom of the page, you can do that with $('body').append(div);, but methinks you don't want that, so you'll have to search the page source for the cell you'd like to add your cell, and then .append() it there.. e.g. $('#content').append(div);
|
|
inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 21, 2018 22:45:45 GMT -8
Ok, I now have it opening a box where I have placed <div id="post_list"></div>. Just need to work out how to pull in the content from posts.
<script type="text/javascript"> $(document).ready(function(){ function my_code() { $('.message').each(function(){ if($(this).find('div').length > 0) { var div = $('<div>$[post]$[post.created_by]:<br /><br /><br />$[post.message]</div>').attr('id','side-post').addClass('post-list'); $('#post_list').append(div); } else { var div = !$('<div>$[post]$[post.created_by]:<br /><br /><br />$[post.message]</div>').attr('id','side-post').addClass('post-list'); $('#post_list').append(div); } }); }; $('#run_code').click(function(){ my_code(); }); }); </script>
The CSS I am using with it. #post_list { bottom: 20%; right: 3%; position: fixed; width: 18%; background-color: #000000; color: #ffffff; max-height: 60%; overflow: auto; border-radius: 6px; overflow-x: hidden; border: 1px solid #cccccc; }
|
|
inherit
229600
0
Sept 7, 2022 11:09:51 GMT -8
Ben Goodman
96
February 2016
benhun
|
Post by Ben Goodman on May 21, 2018 23:07:02 GMT -8
I got mine working. All I have done is I put your JS into a a foreach tag:
{foreach $[post]}
<script type="text/javascript">
$(document).ready(function(){
function my_code() {
$('.message').each(function(){
if($(this).find('div').length > 0)
{
var div = $('<div>$[post]$[post.created_by]:<br /><br /><br />$[post.message]</div>').attr('id','side-post').addClass('post-list');
$('#post_list').append(div);
}
else
{
var div = !$('<div>$[post]$[post.created_by]:<br /><br /><br />$[post.message]</div>').attr('id','side-post').addClass('post-list');
$('#post_list').append(div);
}
});
};
$('#run_code').click(function(){
my_code();
});
});
</script>{/foreach} But there is a"HASH(0xa60ef40)" before every post.created.by.
Edit: Removing the $[post] variable fixed this issue aswell, but some posts seems to appaer three times...
|
|
inherit
140147
0
May 15, 2024 5:30:22 GMT -8
Nscalerr 🐺
Throw me to the wolves and I'll return leading the pack!
3,008
May 2009
nscalerr
|
Post by Nscalerr 🐺 on May 22, 2018 22:43:31 GMT -8
Not sure what to do about the multiple posts appearing, also a way to close it would be nice to. More thinking to do.
|
|