Advertisement
Yuu
-
Posts
422 -
Joined
-
Last visited
-
Days Won
23
Content Type
Profiles
Forums
Downloads
Bugs
WF Feature Plan
Suggestions
WebFlake Release Notes
FAQ
Store
Blogs
Applications
Ideas
Everything posted by Yuu
-
Here's a tutorial on how to create a simple jQuery spoiler. This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things. Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> First, let's get started with the HTML markup. What you'll need is something like this: <div class="spoiler_wrap"> <input type="button" value="Show" /> <div class="spoiler_content">Here's some hidden content</div> </div> At first, it'll look something like this: As you can see, the content isn't hidden like it's supposed to be, but that's because we haven't applied the CSS yet. Let's do that right now. In your .css file, add this: .spoiler_wrap input[type='button'] { color: #fff; background-color: #2C93FA; padding: 2px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); cursor: pointer; } .spoiler_wrap .spoiler_content { display: none; margin-top: 5px; padding-left: 5px; border-left: 3px solid #2C93FA; } It should now look like this: Looks pretty good, right? The next (and final) part of this tutorial would be the jQuery itself. Some of you may not know jQuery, so I'll leave some comments in the code to make things easier to understand. $(document).ready(function() { // Once we click the spoiler button $(".spoiler_wrap input[type='button']").click(function() { // If the button's value is "Show", use the value "Hide" // But if it's not "Show", then change it back to "Show" var btn_txt = ($(this).val() == "Show") ? "Hide" : "Show"; // Actually change the button's value $(this).val(btn_txt); // Go to HTML element directly after this button and slideToggle it $(this).next().stop().slideToggle(); }); }); And you're done! Super easy, nice looking jQuery spoiler with just 3 pieces of code. Here's what it looks like after being opened: You can see that the button's text has been changed to "Hide" and that the content is now shown. You can even copy/paste the HTML as many times as you want and create multiple spoilers! Like so: Hope you found this useful!
-
I'm attempting to make my own application and I'd like to implement an Ajax feature where the member can update their settings via Ajax, and the Ajax bit seems to work fine (as in the request can be sent without a problem), but when I try to use the $_POST method in the .php file, it ends up not grabbing the value from the textarea field and outputs it as "null". Here's a screenshot of what happens when I click the button that sends the Ajax request: Here's my HTML: <script type="text/javascript" src="{$this->settings['board_url']}/admin/applications_addon/other/profilecode/js/main.js"></script> <div class="ipsBox"> <form method="POST"> <textarea id="newTitlePost" class="input_text" name="newTitlePost">{$this->memberData['title']}</textarea> <a id="updateCode" href="{parse url="app=profilecode&module=ajax&section=update&do=updateCode" base="public"}" class="ipsButton_secondary">Click this link</a> </form> <div id="demo"></div> </div> Here's my Javascript file: document.observe( 'dom:loaded', function() { $( 'updateCode' ).observe( 'click', updateCode); }); function updateCode(e) { Event.stop(e); if($('ipsGlobalNotification')) { return false; } new Ajax.Request( ipb.vars['base_url'] + '&app=profilecode&module=ajax§ion=update&do=updateCode', { method: 'post', parameters: { 'md5check': ipb.vars['secure_hash'] }, evalJSON: 'force', onSuccess: function(t) { if( Object.isUndefined( t.responseJSON ) ) { alert( ipb.lang['ajax_failure'] ); } else if ( t.responseJSON['error'] ) { alert( ipb.lang['ajax_failure'] ); } else { ipb.global.showInlineNotification( t.responseJSON['msg'], { 'displayForSeconds': 1.5 } ); $( 'newTitleAjax' ).insert( t.responseJSON['new_title'] + "<br/>" ); } } }); } And here's my PHP file: <?php class public_profilecode_ajax_update extends ipsAjaxCommand { public function doExecute( ipsRegistry $registry ) { if ($this->request['do'] == 'updateCode') { $return = array( 'msg' => 'Your request was successful!', 'new_title' => $_POST['newTitlePost'] ); $this->returnJsonArray( $return ); } } } Does anybody know what I might be doing wrong? I've done a large amount of research and just can't understand why this doesn't work as it should. Thank you to anyone who can help me out!
-
Just for future references: I'll no longer be offering free support or help (via Skype or PM) on anything forum/web dev related.
The only free support I'll give is inside the IP.Board Support forum, if at all. Otherwise, it'll have to be paid for. -
You could try using this hook: http://webflake.sx/files/file/1955-profile-in-sidebar/ I believe the code for the code in that hook was taken from the same tutorial you used. After that, you can go to your ACP -> System -> Manage Hooks, and then re-order them with the 3 little dots on the left side of the hook names. Or if you don't want to do that, make sure you're placing the tutorial's code before this part in your boardIndexTemplate: <foreach loop="side_blocks:$side_blocks as $block"> {$block} </foreach>
-
You have an additional closing </i> tag at the end of each of these, I suggest you remove those.
-
I can't help you with the website integration part of your request, but if you decide on to go with an HTML template instead of Wordpress then I can do it for you (paid work, of course). Any .PSD to Wordpress Theme or HTML/CSS template is done manually (as far as I know), so you'd have to code it from scratch yourself if you don't want to pay somebody to do it for you. I've heard of .PSD -> Wordpress converters, but I'm not sure how well those work, if they work at all.
-
Separate normal topics x pinned topics
Yuu replied to Azhaurn's question in Invision Answered Questions
-
Note: I'm doing this one the default IPB skin, depending on your skin it might be a little different (but not by much). 1) Go to your skin > Global Templates > globalTemplate. 2) Find this: <if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']"> {parse template="quickSearch" group="global" params=""} </if> Copy it, and then remove it. 3) Next, find this: <li id='nav_other_apps' style='display: none'> <a href='#' class='ipbmenu' id='more_apps'>{$this->lang->words['more_apps']} <img src='{$this->settings['img_url']}/useropts_arrow.png' /></a> </li> </ul> And then add the code you just removed after the </ul> So like this: <li id='nav_other_apps' style='display: none'> <a href='#' class='ipbmenu' id='more_apps'>{$this->lang->words['more_apps']} <img src='{$this->settings['img_url']}/useropts_arrow.png' /></a> </li> </ul> <if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']"> {parse template="quickSearch" group="global" params=""} </if> 4) Find this: <li class='right'> Change 'right' to 'left' 5) Find this: <li id='nav_explore' class='right'> Change 'right' to 'left' 6) Go to your CSS > ipb_styles.css > Press Ctrl + F and find this: #search { margin: 20px 0; } Remove 20px and then save. Final result: If you want to switch the position of your primary nav tabs, you'll need to adjust the HTML. How to: Hope this helps. :P
-
Yes it's possible, I've done it before, and you shouldn't have any problems. I have IPB 3.3, IPB 3.4, IPS 4, MyBB 1.6, MyBB 1.8, and xenForo all installed in the same place (just different folders).
-
Go to your ACP -> System -> System Settings -> "System" tab -> Social Media and Sharing Scroll all the way down until you see Enable Share Links and click No and then save.
-
It's not possible to export a hook with images. What people usually do when the hook they use requires images is the create a folder named "upload", and then create the folder path leading to the image. For example: Create a folder to zip up your IPB hook, and put the .XML file in that folder. Then, in the same folder, create a folder named "upload". Inside upload, create a folder named public. Inside public, create a folder named style_extra. Inside style_extra, create a folder named your_folder (change it to whatever you want). And then inside your_folder, upload the images you want to use. This also works for javascript files. And then the code you'd be using is: <img src="{$this->settings['board_url']}/public/style_extra/your_folder/image.png" alt="" /> Note: You can't use {$this->settings['board_url']} in your CSS, so if you're trying to use it in your CSS, you'll have to either: A) Use the style_images method instead of style_extra B) Use inline CSS in your templates, such as this: <style type="text/css"> .test { background: url({$this->settings['board_url']}/public/style_extra/your_folder/image.png); width: 100px; height: 100px; } </style> <div class="test"></div> Hope this helps.
-
I feel so embarrassed... I didn't realize that it also allowed you to make topics, I thought it was only PM's lol. Either way, yeah that's it, thanks a bunch! :D
-
It annoys me so much that the IPS 4 tooltips fade out when you hover out of them, but don't fade in when you hover over them lol
-
Hey guys, I'm looking for a specific hook or app, not sure what it is exactly, but I know for a fact it exists. It creates a new topic every time a member joins. The topic is always created by 1 master account in a specific forum. I've tried looking it up on Google but I don't know the exact name so it's kinda hard to find a result. :s If anyone could direct me in the right direction, it'd be greatly appreciated!
-
How Do You Remove Borders Around Profile Pictures
Yuu replied to Nozzy's question in Invision Answered Questions
ACP -> Look & Feel -> Your Skin -> CSS -> ipb_styles.css. Ctrl + F and search for ".ipsUserPhoto" It'll look something like this I believe: .ipsUserPhoto { padding: blahblahblah; background: blahblahblah; border: blahblahblah; box-shadow: blahblahblah; } Remove the line that start with "border" and it should fix it. -
Nav bar compresses on forum but not ipcontent homepage?
Yuu replied to elemonate's question in Invision Answered Questions
Oh, sorry, forgot to mention that part! It's located in the globalTemplate. :) -
Nav bar compresses on forum but not ipcontent homepage?
Yuu replied to elemonate's question in Invision Answered Questions
Are you looking to disable to "More" dropdown overall? If so, find this and remove it: <li id='nav_other_apps' style='display: none'> <a href='#' class='ipbmenu' id='more_apps'>{$this->lang->words['more_apps']} <img src='{$this->settings['img_url']}/useropts_arrow.png' /></a> </li> If you're asking how to make it also compress on your homepage, then sorry, I don't have the answer to that. :P -
Ohhhhhh wow, I see now. I think Chris mentioned that to me as well but I didn't quite understand at the time. But yup that was exactly my problem. Solved now, thank you very much! :)
-
Yes, the member Chris mentioned this to me over Skype, there is no table that has anything to do with the member title character limit.
-
Does anyone know how to increase the member title limit in IPB 3.4? I tried looking through a few of the .php files inside the /admin folder but I wasn't able to find anything that included a character limit in the first place, unless I was looking in the wrong files. But only a few of them included things related to the member title anyways. The reason I'm trying to increase the limit is because I have the HTML In Member Titles hook installed, and 64 characters including all the HTML characters really limits you if you're trying to do something more than basic.. If anyone could direct me in the right direction I'd appreciate it. Thanks. :)
-
IPB 3.x How do I change "Customization Profile"?
Yuu replied to keefx's question in Invision Answered Questions
This is the tutorial you're looking for: -
Find the class for your Inbox/Notification icons (most likely #inbox_link and #notify_link) and add this to their CSS: position: relative;
-
ACP > Members > Member Groups > Manage Member Groups > Your Group Add this to the beginning of the Group Formatting Prefix: <img src="YourImageLinkHere.png" alt="" />
-
Ahh, I had the same question a few months ago. Here's the answer you're looking for: <if test="$this->memberData['member_id'] && $member['member_id'] == 1"> Your code goes here. </if> Replace $member['member_id'] == 1 with your member ID. Add it below this: <if test="hasCustomization:|:is_array($member['customization']) AND $member['customization']['type']"> {parse template="customizeProfile" group="profile" params="$member"} </if>
