{"id":6666,"date":"2011-03-17T02:52:27","date_gmt":"2011-03-17T06:52:27","guid":{"rendered":"http:\/\/info.template-help.com\/?p=6666"},"modified":"2013-06-14T08:47:56","modified_gmt":"2013-06-14T12:47:56","slug":"slidebox-jquery-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/slidebox-jquery-slider.html","title":{"rendered":"“SlideBox” jQuery slider"},"content":{"rendered":"A simple script which allows us to achieve an effect of a sliding box with content in it.\r\n\r\n

JavaScript<\/h3>\r\nWe should include jQuery framework by pointing src attribute in the script tag to those .js files.\r\n\r\n
\r\n<script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\" ><\/script>\r\n<\/pre>\r\n\r\nInitialization script we place in the  <\/head> section.\r\n\r\n
\r\n<script type=\"text\/javascript\">\r\n    $(function()\r\n        {\r\n        $(\"#link\").click(function(event) {\r\n        event.preventDefault();\r\n        $(this).toggleClass(\"link2\");\r\n        $(\"#dropdown_box\").slideToggle();\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\r\n\r\n.header-banner-right this class defines height of the box in the hidden position\r\n#link this is the button element with an image which hides the content\r\n#dropdown_box this id is the box content area\r\n\r\n
HTML<\/h3>\r\nBelow you can see general HTML script representation:\r\n\r\n
\r\n
<\/div>\r\n<\/a>\r\n 
\r\n    \r\n<\/div>\r\n<\/pre>\r\n\r\n
CSS<\/h3>\r\n\r\n
\r\n#link {\r\nbackground:url(images\/button_go_box.png) no-repeat 0 0;\r\ndisplay:block;\r\nheight:39px;\r\nwidth:39px;\r\nz-index:180000;\r\nmargin:0 0 0 471px;\r\nposition:absolute;\r\n}\r\n\r\n.dropdown_box {\r\nz-index:1;\r\n}\r\n\r\n.dropdown_box {\r\n    zoom:0;\r\n    z-index:1;\r\n}\r\n.all .dropdown_box {\r\n    zoom:0;\r\n    z-index:1;\r\n}\r\n<\/pre>","protected":false},"excerpt":{"rendered":"
A simple script which allows us to achieve an effect of a sliding box with content in it. JavaScript We should include jQuery framework by pointing src attribute in the script tag to those .js files. <script type=”text\/javascript” src=”js\/jquery-1.4.2.min.js” ><\/script> Initialization script we place in the section. <script type=”text\/javascript”> $(function() { $(“#link”).click(function(event) { event.preventDefault(); $(this).toggleClass(“link2”); […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262,270],"tags":[813,817,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6666"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=6666"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6666\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}