We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
[ C ] Spot the Dot
Topic Started: Sep 5 2014, 09:51 PM (805 Views)
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Board: http://w11.zetaboards.com/GamesAndAnime/index/
Software: Zetaboards

I'm looking to start a little game on my forum, nothing big, actually fairly simple. but I'm needing a code or explanation on how to go about it.

Basically I'm wanting to place a small image or text on random pages throughout my forum. I will have members then search for the image or text and when they find it they win. However I'm not sure how to add images or text to specific places on the board.

I know CSS fairly well so I can use Padding, Position, and Margin to place the image/text where I please. But How would I go about adding it to a specific page?

Like say I wanted to place it in the bottom right corner of the "Edit Signature" page, how would I do that?

So all in all, I'm asking for a Javascript that will allow me to place a specified text/image in a specified page and style it via CSS in the theme appearance (I will be hiding them on a single theme not all) so I'm needing it to have a class that I can call for to style via CSS.
Edited by Kankuro, Sep 5 2014, 09:52 PM.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
Code:
 
if(/pages/.test(location.href)){
//code here to be placed in all pages
}


The "pages" part inside the if statement is called a regex, you can learn more about regex (or RegExp) here

Code:
 
if(/pages\/awards/.test(location.href)){
$('body').prepend("<div class='findMe'></div>");
}


You can then style it with CSS. The only problem (as with anything JS) is that if someone looks at the source document then they can find out which page it's on. So instead you can have a selector that only targets something on the signature edit page, although something that would have to be searched for on each page instead of just grabbing the URL.
Code:
 
if($('#edit_sig').length){
$('body').prepend("<div class='findMe'></div>");
}


You can go one step further and add an alert to the element so when it's clicked they know its the ones they're looking for.
Code:
 
if(/home\/\?c=32/.test(location.href)){
var myDiv = $("<div class-'foundMe'></div>").click(function(){
alert('Found Me!');;
});
$('body').prepend(myDiv);
}


I of course didn't include anything in the div, you can add an image or simply colour it with CSS, enabling you to change it on each theme.
Edited by Quozzo, Sep 7 2014, 07:47 AM.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Quozzo
Sep 7 2014, 07:33 AM
Code:
 
if(/pages/.test(location.href)){
//code here to be placed in all pages
}


The "pages" part inside the if statement is called a regex, you can learn more about regex (or RegExp) here

Code:
 
if(/pages\/awards/.test(location.href)){
$('body').prepend("<div class='findMe'></div>");
}


You can then style it with CSS. The only problem (as with anything JS) is that if someone looks at the source document then they can find out which page it's on. So instead you can have a selector that only targets something on the signature edit page, although something that would have to be searched for on each page instead of just grabbing the URL.
Code:
 
if($('#edit_sig').length){
$('body').prepend("<div class='findMe'></div>");
}


You can go one step further and add an alert to the element so when it's clicked they know its the ones they're looking for.
Code:
 
if(/home\/\?c=32/.test(location.href)){
var myDiv = $("<div class-'foundMe'></div>").click(function(){
alert('Found Me!');;
});
$('body').prepend(myDiv);
}


I of course didn't include anything in the div, you can add an image or simply colour it with CSS, enabling you to change it on each theme.
I don't quite follow :/

How would I add say this image Posted Image to the bottom left corner of the edit signature page? And what do I have to change to place it on different pages?

also to edit the CSS would be like this?
div.findMe {
top: 20px;
left: 20px;
}
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Bump?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
An if statement is how you can parse coding on a specific page, like so:
Code:
 
if (location.href.indexOf('/index/') !== -1) {
// Coding Here
}
/index/ means it would parse on the board index only. If you wanted it to parse on the members list, you would use /members/. It's the unique identifier in the pages URL.

'// Coding Here' is specific coding that allows you to place it in a location of your choice. Most elements on ZetaBoards have unique ID's that allow you to add the HTML wherever you wish.

If you're just wanting to add the image near the very bottom of a page you would use this:
Code:
 
$('#main').append('<img src="IMAGE_URL" alt="" class="dot" />');
Changing 'append' to 'prepend' would add the image near the very top of the page. Web developer tools can help you dictate what element you want to append or prepend HTML to. There is also 'before' to insert the HTML before an element, or 'after' to insert the HTML after an element.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 4 2014, 01:37 AM
An if statement is how you can parse coding on a specific page, like so:
Code:
 
if (location.href.indexOf('/index/') !== -1) {
// Coding Here
}
/index/ means it would parse on the board index only. If you wanted it to parse on the members list, you would use /members/. It's the unique identifier in the pages URL.

'// Coding Here' is specific coding that allows you to place it in a location of your choice. Most elements on ZetaBoards have unique ID's that allow you to add the HTML wherever you wish.

If you're just wanting to add the image near the very bottom of a page you would use this:
Code:
 
$('#main').append('<img src="IMAGE_URL" alt="" class="dot" />');
Changing 'append' to 'prepend' would add the image near the very top of the page. Web developer tools can help you dictate what element you want to append or prepend HTML to. There is also 'before' to insert the HTML before an element, or 'after' to insert the HTML after an element.
So for a webpage would I do something like this?
Code:
 
if (location.href.indexOf('/pages/awards/') !== -1) {
$('#main').append('<img src="IMAGE_URL" alt="" class="dot" />');
}
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Yes, you edited the if statement correctly.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 9 2014, 02:41 PM
Yes, you edited the if statement correctly.
Still a wee bit confused on building the whole code. I just don't know what goes where.

Would you care to make me a template (So I can edit in what I want to change) so it is attached to the bottom right of the board on that awards page and when clicked get a pop-up alert? And if possible allow that alert box to match the theme?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I think this is what you want:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
if (location.href.indexOf('/pages/awards/') !== -1) {
$('#main').append('<img src="IMAGE_URL" alt="" class="dot" style="cursor: pointer" /><div id="find_me" class="meta_box" style="display: none; position: fixed; top: 50%; left: 50%">You found me!</div>');

$('img.dot').click(function() {
$('#find_me').fadeIn('slow');
});

$('#find_me').css({
'margin-left': '-' + $('#find_me').width() + 'px',
'margin-top': '-' + $('#find_me').height() + 'px'
});
}
//]]>
</script>
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 10 2014, 01:12 AM
I think this is what you want:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
if (location.href.indexOf('/pages/awards/') !== -1) {
$('#main').append('<img src="IMAGE_URL" alt="" class="dot" style="cursor: pointer" /><div id="find_me" class="meta_box" style="display: none; position: fixed; top: 50%; left: 50%">You found me!</div>');

$('img.dot').click(function() {
$('#find_me').fadeIn('slow');
});

$('#find_me').css({
'margin-left': '-' + $('#find_me').width() + 'px',
'margin-top': '-' + $('#find_me').height() + 'px'
});
}
//]]>
</script>
Works great, how would I move the image around? Using the "dot" class to style it with CSS?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You have to change #main as necessary to a specific element ID you want to append/prepend to an element or insert before/after an element. These all produce different results, for example:
Code:
 
$('#main').append('Test');
Code:
 
$('#main').prepend('Test');
Code:
 
$('#main').before('Test');
Code:
 
$('#main').after('Test');
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 15 2014, 12:35 AM
You have to change #main as necessary to a specific element ID you want to append/prepend to an element or insert before/after an element. These all produce different results, for example:
Code:
 
$('#main').append('Test');
Code:
 
$('#main').prepend('Test');
Code:
 
$('#main').before('Test');
Code:
 
$('#main').after('Test');
Is there a way I could do exact placement with margin or padding?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Margin or padding would just be used to move it around the location it's already in, if you're wanting to actually insert it into another element, as in a whole different location on the page, you would need to use a web developer tool to determine the correct CSS selector to use.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 15 2014, 06:48 PM
Margin or padding would just be used to move it around the location it's already in, if you're wanting to actually insert it into another element, as in a whole different location on the page, you would need to use a web developer tool to determine the correct CSS selector to use.
That's what I thought, thank you Cory :)
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
I tried it but it didn't work with "button" but it does work with "#main". It shows the image but the alert doesn't display on click.

Figured out the issue.
Edited by Kankuro, Dec 18 2014, 10:12 PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1