Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

Pages: (3) 1 2 3  ( Go to first unread post ) ClosedNew TopicNew Poll

 Cbox Toggle and Float Issue [SOLVED]
#
So there was a site that had this awesome cbox you could drag around anywhere on the page and toggle as well. The owner was kind enough to direct me to which codes they used in their stuff, but I'm having one heck of a time. I am coding it on my testing forum first cause I don't want to mess up the actual board. This is my testing site(http://lovemeanddespair.jcink.net/) and this is the actual forum(http://untotheday.jcink.net).

First, I made my userlinks bar float instead of the cbox then for some reason putting this other piece of code(
CODE
<div id="horizontal-toggle2" title="toggle cbox"><img src="http://i66.tinypic.com/opmd0g.png" width="35px;" style="margin-top: -2px;"></div>
above it made it not float anymore, but then like. . . my cbox still isn't showing. I'll see a tiny square appear for a second when I reload but then it's gone, and the thing to show the picture that toggles the cbox(it's a little crown) isn't even showing either. I was hoping to put the image for toggle next to our Pinterest and Tumblr buttons, but I can't do that if I can't figure it out.

And the oddest thing during this whole thing too is that this has appeared again:
user posted image
that is on my test forum, that light little boxed frame under the header.

user posted image
it isn't there on the actual forum, and only appeared sometime during this entire ordeal.

Any help would be so appreciated cause my eyes hurt staring at this code. If you need the site where I saw the code first just let me know.
PM
#
On a plus note, the JQUI draggable script works fine.

Add a z-index of some value like 10 to the #horizontal-toggle2 styles, as you have it set to float, and it should become visible once more. The reason that that has become draggable, however, is because the initializing script targets div:first as its selector. Change this to the ID of whatever element you want to become draggable.
PM
#
QUOTE (DustBucket @ Dec 8 2016, 06:11 PM)
Add a z-index of some value like 10 to the #horizontal-toggle2 styles, as you have it set to float, and it should become visible once more.


I did this and nothing happened. The weirdest thing is suddenly that little crown image that is supposed to toggle the cbox is showing, but nothing happens when I click it. Though I do want to move that image somehow so it's with my Tumblr/Pinterest buttons instead of where it's at now, but I can worry about that later. It's a pointless concern if I can't even get the cbox to show at all. =/

QUOTE
The reason that that has become draggable, however, is because the initializing script targets div:first as its selector. Change this to the ID of whatever element you want to become draggable.


Okay this confuses me a little cause the code on the other site is exactly the same as it is here and all that floats is their cbox. To fix this on mine I just put in: "div id="draggable" or? Sorry, I'm just unclear on this part.
PM
#
Their first div is likely the c-box, then. Just edit the div:first selector in the line
CODE
$('div:first').draggable({
PM
#
Their div:first is the same as mine. I didn't change that at all. I copied and pasted it in as they told me to, and the code is the same. I did change some of the names like 'ysbc' to 'cbox' but made sure to adjust them in other areas. Sorry to be such a pain. Would it be easier if I gave you guest access to my Admin CP or something or posted my code in here? *headscratch*
PM
#
The script is the same, but your page layout is (likely) not.
user posted image

The highlighted element is the first div that appears on the page structure, thus, the script targets that (remember that it's looking for div:first). That element happens to be the horizontal-toggle div that you've set up, presumably to toggle the c-box. If you instead want your c-box to be draggable, you will need to change the target in the JS to #draggable, which is what you've named the encapsulating div for the c-box.

The reason the c-box itself is not showing is simpler: you have the position property of #draggable set to 'fixed', but have not specified where to fix it to on the page. Add a 'top' or 'left' property and it should appear.
PM
#
I added a top and still no cbox visible. And honestly, I'm completely baffled cause what you're seeing as the first div? I'm not seeing that at all. I'm sorry for being such a pain about this. . .

would it be easier if I just c&ped my wrappers and css in here so you can see my ordering or?

Cause the thing is, the cbox is supposed to be able to both float and toggle as it does on the site where I got the code from the admin there who did it, but it is doing neither on my site.
PM
#
The reason you cannot see the c-box is because the #chatter div is set to display:none;

Go ahead and copy just the wrappers onto pastebin and put the link up here.

Unfortunately, copy and paste doesn't really work so well with scripts and coding, and generally have to be re-adapted to your specific structure. It's no biggy, just a slight hurdle.
PM
#
That's so odd, but any help is appreciated. Truly. Here's the link for pastebin:

just wrappers
PM
#
Yup, so, this:
CODE
<div id="horizontal-toggle2" title="toggle cbox"><img src="http://i66.tinypic.com/opmd0g.png" width="35px;" style="margin-top: -2px;"></div>


Is the first div element of the body tag in your wrappers. When your Draggable script searches for div:first, it looks for the first element in the DOM (the structured tree of elements) that matches its criteria: in this case, it must be a div and it must be the first (and only the first) that matches that criteria (:first). For your wrappers, this is the horizontal-toggle button, as it is a div element that appears as the first child of the body tag (the head tag is meta and is excluded from Javascript selectors).

No offense, but your structure is.. kinda a mess? It'd probably be easiest to just start from scratch with the c-box. I don't know how much you know about coding (so if you need more involved help let me know), but the general flow of things for this should be something more like:

CODE

c-box wrapper (draggable) [
 checkboxes (used as toggle switches)
 c-box
]
js [
 JQUI Draggable
]
js [
 Save state on page unload
]
PM
#
Honestly, I've no clue how to code something like a cbox that toggles and floats. My coding skills weren't that far along in the first place and they've been out of use for years so I'm just getting the rust off. The place where I got this from the person told me the order they had the stuff in and I tried my best to do that, but. . . yeah, as you can see it's a mess and it's not working. I don't even know how to begin to start from scratch on something of this level lol so I most definitely need more involved help.
PM
#
CODE
<style>
.cbwrap {
   background: white none repeat scroll 0 0;
   position: absolute;
   z-index: 100;
top: 100px;
left: 100px;
}
#cbtog:checked ~ #cbtogoff, #cbtog:not(:checked) ~ #cbtogon, #cbtog {
   display: none;
}
#cbtog:checked ~ .cbox {
   max-height: 500px;
}
#cbtog:not(:checked) ~ .cbox {
   max-height: 0px;
}
</style>
<div class="cbwrap">
 <input type="checkbox" id="cbtog">
 <label for="cbtog" id="cbtogon"> Turn off </label>
 <label for="cbtog" id="cbtogoff"> Turn on </label>
 <div class="cbox">
  <div id="cboxdiv" style="position: relative; margin: 0 auto;">
  <!-- C-Box code here -->
  </div>
 </div>
</div>
<script>
$(window).unload(function() {
   var a = $('.cbwrap'),
       top = a.css('top'),
 left = a.css('left'),
       state = $('#cbtog').prop('checked'),
       prefarray = [top, left, state];
   localStorage.setItem('prefarray', JSON.stringify(prefarray));
});
$(function(){
 var frisbee = localStorage.prefarray || '{}',
  hulahoops = JSON.parse(frisbee);
 $('#cbtog').prop('checked', hulahoops[2]);
 $('.cbwrap').css({
           'top': hulahoops[0],
           'left': hulahoops[1]
       });
});
 $('.cbwrap').draggable({
     containment: "window",
     distance: 10,
     scroll: !1,
     iframeFix: '#cboxdiv',
     opacity: 0.75
 });
</script>


You'll need to host a copy of JQUI's Draggable widget for it to work (if you can't drag the window, your JQUI configuration is incorrect), and it should go before the rest of the related scripts.

Obviously, feel free to edit what you need, since it's really just a rough template right now. The only significant difference is that I used local storage instead of cookies, so any user that has disabled local storage won't be able to have a persistent c-box. Also, this uses an HTML checkbox as a toggle switch, which is neat because you can use any type of CSS transform and transition to 'open' the c-box (without the performance hit that JS animations bring with them).

This post has been edited by DustBucket: Dec 15 2016, 01:23 AM
PM
#
Would I be able to host that on Jcink with JFH? And where would I find a copy of that to host?

This post has been edited by THE SONIC CENTURION: Dec 15 2016, 04:16 AM
PM
#
Yup! It's just a Javascript file like any other.

http://jqueryui.com/download/

You'll want to use the download configure-ererer to build your JQUI, otherwise you'll have a huge script library that you only use like two parts of. Click all the 'toggle all' checkmarks so that nothing is selected (barring version 1.12.1 for JQuery 1.7+, which I believe is what JC Ink uses by default), and then scroll through and click just the checkmark for 'Draggable'. It'll auto select five or six other functions for you, and then you should be able to scroll down to the bottom and click download.

Upload the .js file from the archive to your board's disk space, and you should be able to link straight to it.
PM
#
Does all of the above code go in my wrappers? I know the JQUI script will. . .

This post has been edited by THE SONIC CENTURION: Dec 15 2016, 08:29 PM
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

OptionsPages: (3) 1 2 3  ClosedNew TopicNew Poll