Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
samcottle67
@samcottle67
Hi, I was wondering if I could get your help really quick. I am trying to integrate your toggle button into my code but they're not showing up right.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">

<script src="script.js"></script>
<link rel="stylesheet" href="css/bootstrap.3.3.2.min.css">

<!-- Include jQuery -->
<script src="js/jquery.1.11.0.min.js"></script>


<!-- Jquery Toggle Button -->
<link rel="stylesheet" href="css/toggles-all.css">

</head>
<body>

<div class="toggle-modern">
<div>
<h5>Modern</h5>
<div class="toggle on" style="height: 35px; width: 110px;">
<div class="toggle-slide">
<div class="toggle-inner" style="width: 185px; margin-left: 0px;">
<div class="toggle-on active" style="height: 35px; width: 92.5px; text-indent: -11.6667px; line-height: 35px;">ON</div>
<div class="toggle-blob" style="height: 35px; width: 35px; margin-left: -17.5px;"></div>
<div class="toggle-off" style="height: 35px; width: 92.5px; margin-left: -17.5px; text-indent: 11.6667px; line-height: 35px;">OFF</div>
</div>
</div>
</div>
</div>
</div>

<!-- Toggle buttons -->
<script src="js/toggles.js" type="text/javascript"></script>
<script src="js/activate_toggle.js"></script>
</body>
</html>

The activate_toggle.js file is just the javascript portion:
// Simplest way:
$('.toggle').toggles();

// With options (defaults shown below)
$('.toggle').toggles({
drag: true, // allow dragging the toggle between positions
click: true, // allow clicking on the toggle
text: {
on: 'ON', // text for the ON position
off: 'OFF' // and off
},
on: true, // is the toggle ON on init
animate: 250, // animation time (ms)
easing: 'swing', // animation transition easing function
checkbox: null, // the checkbox to toggle (for use in forms)
clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
width: 50, // width used if not set in css
height: 20, // height if not set in css
type: 'compact' // if this is set to 'select' then the select style toggle will be used
});

// Getting notified of changes, and the new state:
$('.toggle').on('toggle', function(e, active) {
if (active) {
console.log('Toggle is now ON!');
} else {
console.log('Toggle is now OFF!');
}
});

Problem: The ON and OFF buttons show up one on top of another instead of side to side.

Thanks in advance!
-Sam
Patrick Fong
@lielar

Hi - Would like to use toggle individual jquery objects. There is a list of toggles divs. I have tried to use div ids and identified individual div classes using an identifier
eg div class="toggle 12234.toggle toggle-light"

When I try to do $('12234.toggle').toggle(true), the toggle bar would not move (from active to inactive and vice versa). It only works with $('toggle').toggle(true).

Any idea how to trigger the toggle on a page with multiple toggles?

David Hawkings
@dhaich
Hi all. Has anyone run into a problem where the toggle dissapears when you try to toggle it through Javascript?
Simon, awesome widget by the way. thank you for developing this!
David Hawkings
@dhaich
@simontabor Hi Simon. I'm wondering if you can help me out a bit. I'm trying toggle from javascript and the when I call toggle.toggle(false), the widget doesn't toggle and it disappears.
Here is my code:

function setHourlySalaryToggle(incomeItem) {

var toggle = getHourlyToggleFromIncomeItem(incomeItem);
var salaryVal = getSalaryInputForIncomeItem(incomeItem).val();
var hourlyRateVal = getHourlyRateInputForIncomeItem(incomeItem).val();
if ((salaryVal > 0) && (hourlyRateVal < .01)) {
    toggle.toggle(false);
}

}

function initializeHourlySalaryToggleProperties(toggle) {
toggle.toggles(
{
drag: true, // allow dragging the toggle between positions
click: true, // allow clicking on the toggle
text: {
on: 'Hourly', // text for the ON position
off: 'Fixed' // and off
},
on: true, // is the toggle ON on init
animate: 250, // animation time (ms)
easing: 'swing', // animation transition easing function
checkbox: null, // the checkbox to toggle (for use in forms)
clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
width: 70, // width used if not set in css
height: 25, // height if not set in css
type: 'compact' // if this is set to 'select' then the select style toggle will be used
}
);

}

David Hawkings
@dhaich
Nevermind. I found the problem. I wasn't calling toggle on the right object.
@simontabor FYI. There is a typo in your README.md. The class name for "toggle" has an extra s in some references.
eg. // the underlying Toggles class can be accessed
var myToggle = $('.toggles').data('toggles');
I think it should be:
eg. // the underlying Toggles class can be accessed
var myToggle = $('.toggles').data('toggles');
sorry.eg. // the underlying Toggles class can be accessed
var myToggle = $('.toggle').data('toggles');
Again. Awesome widget. Thank you for making it available!