{"id":1655,"date":"2008-09-07T09:35:36","date_gmt":"2008-09-07T13:35:36","guid":{"rendered":"http:\/\/teamtutorials.com\/?p=1655"},"modified":"2008-10-26T14:44:13","modified_gmt":"2008-10-26T18:44:13","slug":"jquery-pop-over-effects","status":"publish","type":"post","link":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects","title":{"rendered":"jQuery Pop Over Effects"},"content":{"rendered":"<p>This tutorial we will create a pop over box using the jQuery Javascript Framework. I will demonstrate a few of the animation option in jQuery and discuss why you should or shouldn\u2019t use them. <\/p>\n<p>Disclaimer:<br \/>\nI will be using a transparent .png for this tutorial. Not all browsers handle the transparency right. Also some browsers, like Internet Explorer, will display the transparency fine if it is a normal image on a page. When you try to animate that image you will get the \u201chalo\u201d effect. You will see what I mean later. If you are using a browser that supports transparent .png file, you will need to find the .png fix for it. Here are some <a href=\"http:\/\/code.google.com\/p\/ie7-js\/\">png fixes for IE 5-7<\/a> , you can link directly to the files hosted at Google if you would like to.<\/p>\n<p>Why jQuery? Basically I used jQuery here because it is fast and simple. You could accomplish all of the effects by writing you own Javasciprt, but why do that when the makers of jQuery have done it all for you?<\/p>\n<p>First you will need to download the <a href=\"http:\/\/code.google.com\/p\/jqueryjs\/downloads\/detail?name=jquery-1.2.6.min.js&#038;downloadBtn=\">latest version of jQuery<\/a>. At the time of the post the current version is called jquery-1.2.6.min.js. Save jQuery to the same folder you will be saving your html files to, I called mine jQuery.<\/p>\n<p>Next we need to layout the page. I am not going to explain all of the code in this tutorial. If you don\u2019t understand it please see our XHTML and CSS tutorials. The part that you will want to pay attention to is the pop up. Download the box.png file here (box.png):<\/p>\n<p><a href=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/box.png\"><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/box.png\" alt=\"\" title=\"box\" width=\"450\" height=\"425\" class=\"alignleft size-full wp-image-1656\" \/><\/a><\/p>\n<p>Here is the source code for the page layout:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;jQuery Pop In&lt;\/title&gt;\r\n\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n&lt;!--\r\n#box\r\n{\r\nposition: absolute;\r\ntop:25%;\r\nleft:25%;\r\nwidth:50%;\r\ntext-align: center;\r\n}\r\n\r\n#form{\r\nbackground: url('box.png') no-repeat;\r\nwidth: 450px;\r\nheight: 425px;\r\nmargin: 0 auto;\r\n}\r\n--&gt;\r\n&lt;\/style&gt;\r\n\r\n\r\n&lt;\/head&gt;\r\n\r\n\r\n&lt;body&gt;\r\n&lt;a href=&quot;#&quot; id=&quot;in&quot;&gt;Fade Box&lt;\/a&gt; &lt;!-- Button to Fade the div in --&gt;\r\n&lt;a href=&quot;#&quot; id=&quot;show&quot;&gt;Show Box&lt;\/a&gt; &lt;!-- Button to Simply show the box with no effect --&gt;\r\n&lt;a href=&quot;#&quot; id=&quot;slide&quot;&gt;Slide Box&lt;\/a&gt; &lt;!-- Button to slide the box in --&gt;\r\n\r\n\r\n&lt;div id=&quot;box&quot;&gt; &lt;!-- This container centers the box in your browser windo --&gt;\r\n\r\n&lt;div id=&quot;form&quot;&gt;&lt;\/div&gt; &lt;!-- This is the actual box.--&gt;\r\n\r\n&lt;\/div&gt;&lt;!-- end #box--&gt;\r\n\r\n&lt;\/div&gt;&lt;!-- end #form--&gt;\r\n\r\n\r\n&lt;!-- the rest is the basic page layout--&gt;\r\n&lt;div id=&quot;page&quot;&gt;\r\n\r\n&lt;h2&gt;This is the page&lt;\/h2&gt;\r\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam porta quam eget\r\nturpis placerat aliquam. Praesent eget metus. Aliquam fermentum, massa a pulvinar\r\nsodales, justo velit consectetuer purus, at vehicula magna libero quis sapien.\r\nPraesent molestie. Pellentesque habitant morbi tristique senectus et netus et\r\nmalesuada fames ac turpis egestas. Vivamus id diam non metus euismod sollicitudin.\r\nDuis lobortis leo vel dui. Nulla ultricies tortor at augue. Proin egestas feugiat nibh.\r\nMaecenas a pede sed lorem vestibulum facilisis.&gt;\/p&gt;\r\n\r\n&lt;p&gt;Curabitur venenatis tempus risus. Lorem ipsum dolor sit amet, consectetuer\r\nadipiscing elit. Praesent elit. Donec imperdiet dapibus lorem. Mauris imperdiet lacinia\r\nlacus. Aliquam pellentesque enim ut nisl. Pellentesque tristique, augue egestas porttitor\r\nsuscipit, lacus dui tempus dui, in commodo lacus mauris non tortor. Lorem ipsum dolor sit\r\namet, consectetuer adipiscing elit. Duis vel neque sed nibh pharetra adipiscing. Etiam\r\neuismod rhoncus dui. Sed ut nulla. Quisque mollis.&lt;\/p&gt;\r\n\r\n&lt;p&gt;Praesent libero turpis, ultrices nec, blandit sed, cursus sed, augue. Cum sociis\r\nnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec hendrerit\r\npretium elit. Donec eget dui in mauris lobortis viverra. Vestibulum pharetra, libero in\r\nbibendum malesuada, ante ligula lobortis turpis, eu tempor turpis libero at lacus. Curabitur\r\nsemper, ligula non mattis semper, neque dolor fermentum arcu, quis vehicula ipsum mi sed libero.\r\nSuspendisse potenti. Integer ut lacus nec sem hendrerit ornare. Nulla eros. Duis nec mauris.\r\nCras ac turpis vel ante venenatis consequat. Sed rutrum lobortis augue. Aenean mi lectus,\r\nvulputate quis, rutrum in, pharetra id, dolor. Proin posuere pede vitae ipsum. Curabitur euismod\r\nsemper odio. Ut tristique scelerisque leo. Fusce at ante sit amet lorem pharetra viverra. In hac\r\nhabitasse platea dictumst.&lt;\/p&gt;\r\n\r\n&lt;p&gt;Curabitur id nunc. Cras euismod, orci sed eleifend tempus, massa lacus sodales metus, vitae\r\ntristique augue elit a tortor. Vestibulum viverra, nisi id faucibus sodales, nunc dolor condimentum\r\neros, et accumsan velit orci ut dolor. Donec dolor dolor, porttitor nec, porta in, rutrum vel, leo.\r\nSuspendisse erat eros, ultricies in, auctor in, pretium vel, ante. Aliquam erat volutpat.\r\nVestibulum auctor ipsum ut risus. Maecenas nec sapien. Nullam eget ipsum nec sapien ornare dapibus.\r\nPellentesque ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames\r\nac turpis egestas. Integer ac pede. Phasellus eleifend malesuada nibh. Ut laoreet, mi a auctor\r\nfermentum, magna lectus placerat ligula, a vestibulum sapien arcu non nunc. Vivamus tristique.\r\nVestibulum sagittis est.&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\nPhasellus tincidunt neque et dui. Praesent sed enim. Aliquam gravida pulvinar quam. Class aptent\r\ntaciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vitae ante nec\r\ntellus rutrum pharetra. Praesent sodales tempus magna. Vestibulum fermentum imperdiet leo. Praesent\r\nvel augue. Proin at nisi. Etiam volutpat venenatis ipsum. Morbi venenatis. Mauris porta elementum velit.\r\nPellentesque nibh dolor, molestie in, ultrices at, accumsan sit amet, massa. &lt;\/p&gt;\r\n&lt;p\/&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>So as you see we have the page with our pop box open.<br \/>\n<a href=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/javascript-pop-over-effect-02.jpg\"><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/javascript-pop-over-effect-02.jpg\" alt=\"\" title=\"javascript-pop-over-effect-02\" width=\"500\" height=\"413\" class=\"alignnone size-full wp-image-1657\" \/><\/a><\/p>\n<p>Make sure that everything looks right; the box is showing and center, etc. Now we don\u2019t want this popup to show by default so we will hide it. In the CSS we will set the display value to none on the #box. Add the line \u2018display: none;\u2019 to the existing css code.<\/p>\n<style type=\"text\/css\">\n<!--\n#box\n{\nposition: absolute;\ntop:25%;\nleft:25%;\nwidth:50%;\ntext-align: center;\ndisplay: none;\n}\n\n[\/sourcecode]\n\nNow the page should look like this.\n<a href=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/javascript-pop-over-effect-03.jpg\"><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/javascript-pop-over-effect-03.jpg\" alt=\"\" title=\"javascript-pop-over-effect-03\" width=\"500\" height=\"412\" class=\"alignnone size-full wp-image-1658\" \/><\/a>\n \n\nNow to add jQuery. First we need to call the jquery file in the head of our page. Add the line below the title and above the style tag like below.\n \n[sourcecode language='html']\n<html>\n<head>\n<title>jQuery Pop In<\/title>\n\n<script type=\"text\/javascript\" src=\"jquery-1.2.6.min.js\"><\/script>\n\n\n\n\n<style type=\"text\/css\">\n\u2026\n\n\nNext we will create the code for our first link the \u201cfade box\u201d link. In the head we will add the following code just below our other javascript tag:\n\n<script type=\"text\/javascript\">\n\t$(document).ready(function(){\n\n\t\t$(\"a#in\").click(function(event){\n\t\t\t$(\"div#box\").fadeIn(\"slow\");\n\t\t});\n\n\t\t$(\"div#box\").click(function(event){\n\t\t\t$(\"div#box\").hide();\n\t\t});\n\n\t});\n<\/script>\n[\/html]\n\nWhat does the code do?\n\nFirst we are only going to run the code when the document is ready. A lot of people will use the page load function, but I like to use document ready. All other code will be contained in this function.\n\n\nThis line calls the jquer on click function and passes the link with the id=\u201din\u201d to it. You do not need to include the a, but I think it is easier to tell the named elements apart that way:\n[sourcecode language='js']\n\n$(\"a#in\").click(function(event){  \n\n[\/sourcecode]\n\nSo jQuery will \u201cwatch\u201d the page and when the link is clicked, it will run the next code. This code calls the fadeIn function. Capital I by the way. It is basically saying find #box and fade it in slowly:\n\n[sourcecode language='js']\n\n\n\t$(\"div#box\").fadeIn(\"slow\");\n \n});\n[\/sourcecode]\n\nFor the speed of the function you could use \u201cslow\u201d or \u201cfast\u201d, but you can also set the speed in milliseconds such as fadIn(1000).\n\nThe next part of the code is saying that when you click on the box, make it disappear:\n[sourcecode language='js']\n\n\t\t$(\"div#box\").click(function(event){\n\t\t\t$(\"div#box\").hide();\n\t\t});\n[\/sourcecode]\nNow you could use the .fadeOut function. I used hide for a reason and you will see why below.\n\nThe problems with the fade function and transparent .png files:\nDue to the way some browsers render the png you will get the halo effect:\n\n<a href=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/javascript-pop-over-effect-04.jpg\"><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/javascript-pop-over-effect-04.jpg\" alt=\"\" title=\"javascript-pop-over-effect-04\" width=\"500\" height=\"148\" class=\"alignnone size-full wp-image-1659\" \/><\/a>\n \n\n\nAs far as I know there is no fix for this. That is why I usually just use the simple show\/hide function.\n\nThe solution is to use the show\/hide functions. We will ad the code for the show box button:\n[sourcecode language='js']\n\n<script type=\"text\/javascript\">\n\t$(document).ready(function(){\n\n\t\t$(\"a#in\").click(function(event){\n\t\t\t$(\"div#box\").fadeIn(\"slow\");\n\t\t});\n\n\t\t$(\"div#box\").click(function(event){\n\t\t\t$(\"div#box\").hide();\n\t\t});\n\t\t\n\t\t$(\"a#show\").click(function(event){\n\t\t\t\t$(\"div#box\").fadeIn(\"slow\");\n\t\t});\n\n\t});\n<\/script>\n[\/sourcecode]\n\nNow when you click the show box button it will simple pop up with no effect.\n\n\nAnother effect is the slide down\/up effect, works with the same parameters as the fade effect. Set this code to work when you click the slide button.\n\n[sourcecode language='js']\n\n\t\t$(\"a#slide\").click(function(event){\n\t\t\t\t$(\"div#box\").slideDown(\"slow\");\n\t\t});\n[\/sourcecode]\n\nThe slide effect seems to work correctly in all of the browsers I have tested above. \n\n\nThis was a basic tutorial on some of the effects in jQuery. Here is the full source, images, and jquery code that was used in this tutorial.\n\n<a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/jquery-effect-code.zip'>jquery-effect-code<\/a>\n\nIf you have questions please ask. \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial we will create a pop over box using the jQuery Javascript Framework. I will demonstrate a few of the animation option in jQuery and discuss why you should or shouldn\u2019t use them. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[46,17],"tags":[50,51,53,42],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery Pop Over Effects<\/title>\n<meta name=\"description\" content=\"This tutorial we will create a pop over box using the jQuery Javascript Framework. I will demonstrate a few of the animation option in jQuery and discuss why you should or shouldn\u2019t use them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/box.png\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/box.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects\",\"name\":\"jQuery Pop Over Effects\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#primaryimage\"},\"datePublished\":\"2008-09-07T13:35:36+00:00\",\"dateModified\":\"2008-10-26T18:44:13+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"This tutorial we will create a pop over box using the jQuery Javascript Framework. I will demonstrate a few of the animation option in jQuery and discuss why you should or shouldn\\u2019t use them.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Pop Over Effects\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Pop Over Effects","description":"This tutorial we will create a pop over box using the jQuery Javascript Framework. I will demonstrate a few of the animation option in jQuery and discuss why you should or shouldn\u2019t use them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/box.png","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/09\/box.png"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects","name":"jQuery Pop Over Effects","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#primaryimage"},"datePublished":"2008-09-07T13:35:36+00:00","dateModified":"2008-10-26T18:44:13+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"This tutorial we will create a pop over box using the jQuery Javascript Framework. I will demonstrate a few of the animation option in jQuery and discuss why you should or shouldn\u2019t use them.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/jquery-pop-over-effects#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"jQuery Pop Over Effects"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1655"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=1655"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1655\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=1655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=1655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=1655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}