| 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: |
- Pages:
- 1
- 2
| [ C ] Spot the Dot | |
|---|---|
| Tweet Topic Started: Sep 5 2014, 09:51 PM (807 Views) | |
| Kankuro | Sep 5 2014, 09:51 PM Post #1 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
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.
|
![]() |
|
| Quozzo | Sep 7 2014, 07:33 AM Post #2 |
|
By the blood of Sanguinius!
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
The "pages" part inside the if statement is called a regex, you can learn more about regex (or RegExp) here
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.
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.
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.
|
![]() |
|
| Kankuro | Sep 7 2014, 04:04 PM Post #3 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
I don't quite follow ![]() How would I add say this 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; } |
![]() |
|
| Kankuro | Dec 3 2014, 10:08 PM Post #4 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Bump? |
![]() |
|
| Cory | Dec 4 2014, 01:37 AM Post #5 |
|
Member
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
An if statement is how you can parse coding on a specific page, like so:/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: 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. |
![]() |
|
| Kankuro | Dec 9 2014, 02:37 PM Post #6 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
So for a webpage would I do something like this?
|
![]() |
|
| Cory | Dec 9 2014, 02:41 PM Post #7 |
|
Member
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Yes, you edited the if statement correctly. |
![]() |
|
| Kankuro | Dec 9 2014, 02:44 PM Post #8 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
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? |
![]() |
|
| Cory | Dec 10 2014, 01:12 AM Post #9 |
|
Member
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
I think this is what you want: Admin CP Themes Board Template Below the Board
|
![]() |
|
| Kankuro | Dec 13 2014, 12:56 PM Post #10 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Works great, how would I move the image around? Using the "dot" class to style it with CSS? |
![]() |
|
| Cory | Dec 15 2014, 12:35 AM Post #11 |
|
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:
|
![]() |
|
| Kankuro | Dec 15 2014, 12:46 PM Post #12 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Is there a way I could do exact placement with margin or padding? |
![]() |
|
| Cory | Dec 15 2014, 06:48 PM Post #13 |
|
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. |
![]() |
|
| Kankuro | Dec 15 2014, 09:18 PM Post #14 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
That's what I thought, thank you Cory
|
![]() |
|
| Kankuro | Dec 18 2014, 10:09 PM Post #15 |
|
かんくろ
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Figured out the issue. Edited by Kankuro, Dec 18 2014, 10:12 PM.
|
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| Go to Next Page | |
| « Previous Topic · Closed Requests · Next Topic » |
- Pages:
- 1
- 2
| Track Topic · E-mail Topic |
8:32 PM Jul 10
|


![]](http://b1.ifrm.com/0/1/0/p601690/pipright.png)



to the bottom left corner of the edit signature page? And what do I have to change to place it on different pages?
Themes
8:32 PM Jul 10