Javascript slidetoggle does not work
<script> $(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
}); </script>
<style>
- panel, #flip {
padding: 5px; text-align: center; background-color: #E7ECEC; border: solid 1px #c3c3c3;
}
- panel {
padding: 50px; display: none;
} </style>
This script works perfect on mobile devices, but not on Mac or PC Firefox browser. Example can be seen at http://annunciationcc.org/#announcements. List items should be show collapsed until selected, there are not.
所有回覆 (4)
Do you mean you want to see the "3-bar" menu button in the page on desktop as well as mobile? Currently I have to narrow the window considerably for the display to switch. This is going to vary based on zoom levels, but if the window.innerWidth is 981 or less, I get the menu button; if it is 982 or higher, the left column is visible.
Actually, I think you meant something else, but I can't tell.
The Browser Console shows some errors:
GET http://annunciationcc.org/js/modernizr.custom.79639.js [HTTP/1.1 404 Not Found 143ms]
unreachable code after return statement jquery.scrolly.min.js:5:4
GET http://annunciationcc.org/js/modernizr.custom.79639.js [HTTP/1.1 404 Not Found 59ms]
unreachable code after return statement jquery.scrolly.min.js:5:4
TypeError: $nav_a.scrolly(...) is undefined init.js:171:5
TypeError: $(...).accordion is not a function sliding_panels.js:49:1
Sorry if my explanation is unclear.
The problem is that I am using webkit which is not supported by Firefox. Seems odd that the code works on iPhone & iPad using Firefox?
Here is the actual code that is not working, sorry I posted the wrong stuff initially. /* Start Here */
summary::-webkit-details-marker {
color: #00ACF3; font-size: 100%; margin-right: 2px;
} summary:focus { outline-style: none; } article > details > summary { font-size: 100%; margin-top: 16px; } details > p { margin-left: 24px; } details details { margin-left: 36px; } details details summary { font-size: 16px; }
- back-to-top {
display: none; background-color: #3C3F45; margin: 0; position: fixed; bottom: 0; right: 0; width: 50px; height: 50px; z-index: 99;
-webkit-transition: background 0.1s linear 0s; -moz-transition: background 0.1s linear 0s; -o-transition: background 0.1s linear 0s; transition: background 0.1s linear 0s; }
由 bilkimes 於 修改
bilkimes said
The problem is that I am using webkit which is not supported by Firefox. Seems odd that the code works on iPhone & iPad using Firefox?
On iOS, Firefox is a shell over Safari, which is the most Apple allows. On other platforms, Firefox uses its own rendering engine.
This forum focuses on end-user support; also, its wiki-based syntax does not work well with code snippets, as you can see. For development questions, could I suggest trying one these:
- StackOverflow: http://stackoverflow.com/
- MozillaZine Web Developer board: http://forums.mozillazine.org/viewforum.php?f=25