I have used Owl Carousel in my footer. The carousel works fine in most pages like Home, Products, etc. but doesn't work in some pages like Register, Affialiate, Information pages, etc.
I checked console and i got the error:
Uncaught TypeError: $(...).owlCarousel is not a function
Figured out the js and css for carousel are not included in header for those pages.
I know about getScripts() and getStyles() functions of document.php that are called in header.php. How do I get the js and css available for all the pages of my website? I can hardcode it but is there any other way around?
Open:
catalog/controller/common/footer.php
add:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');
this will add owl carousel files to all pages.
Related
I'm using Joomla 3.4 and want to open popup with some article only.
I have this link to load into popop: index.php?option=com_content&view=article&catid=13&Itemid=176&id=6&tmpl=component
I know that I must add tmpl=component but when I add this it load system CSS, JS and HTML layout. It doesn't load active template CSS, JS etc. Why is this happening? Without this attribute it load whole page with active template.
Thanks for advice.
Never mind! I have already done this. I just need to edit component.php file in template.
OK so I found the solution.
I just create file named 'component.php' in the template root folder and edit it as I want. I include my CSS, JS, etc to the file with my specific HTML. So if I add tmpl=component to the URL it looks for compoment.php file. That's all.
I installed a DNN skin which comes with several templates. Now these templates share the same footer for example: contact us, gallery, about us etc. . .
Is there a way where I can make these modules all share the same content using different templates? I am importing about 7 templates in the website but when I can the content of one of the footers the others content is not changed. Any Ideas on how I can link these together so in the future when I need to change something all of them follows?
You can share content across pages in DNN using the "Display On All Pages" setting in the module settings.
1) Install a module into the Footer on ONE page.
2) Configure the Module Settings for that module to "Display On All Pages"
3) Done
Any changes made to the module, should reflect across all pages. It won't matter which page you make the change on either.
Note: Modules that are set to display on all pages will attempt to load in a PANE of the same name, so if your "layouts" all have a FooterPane, the module will appear there. If you have any layouts that don't have a FooterPane, the module will appear in the ContentPane of that page.
Deleting a module from one page is possible through the module Actions.
To remove the module from all pages, you have to go to the Module Settings, and unselect the Display On All Pages option. The module will then remain on THAT page, but not on any other pages.
All the "deleted" modules (after unselecting Display On All Pages) will be in the Admin/Recycle Bin
I have a page that includes a CFDiv tag that displays content from another file.
<cfajaximport tags="cfwindow,cfform,cflayout-tab,cfdiv">
<cfoutput><cfdiv class="vehicle-log" bind="url:trip_tab.cfm?ticketid=#ticketnum#" ID="theDiv" bindOnLoad = "true"/></cfoutput>
The external file has jquery tabs and jquery datepicker. None of the jquery seems to work in the CFDiv. If I call the external page by itself, everything works fine.
The reason I'm using a CFDiv here (I know most people hate cf layout stuff) is because the external page has a form element that I can submit and add to data to the db without refreshing the whole parent page. This is the only way I know how to do this.
Anyways, does anyone know how to get my jquery elements to work in a CFDiv?
Thanks.
Brian
You've got more than one problem here. First, you are using <CFDiv>, which under the covers is using portions of a very old version of ExtJS. So you are likely going to run into some headaches with mixing ExtJS and jQuery (and jQuery plugins).
Second, since <CFDiv bind="..."> uses AJAX to load the external HTML window content, you would need to change your JavaScript strategy. <CFDiv> will not pull in and execute the JavaScript code (including jQuery) from the external page (trip_tab.cfm), unless you only use CF UI widgets inside that external page (then the <cfajaximport> tag handles that for you). It only loads the HTML DOM content. You will have to move any <script> and <link rel="stylesheet"> tags and custom JavaScript/jQuery code and CSS into the parent page (the page that has the <CFDiv> tag in it). Then you'll have to find a way to listen for the AJAX event (completion of loading the external page) and call the custom JavaScript/jQuery code.
As others suggested in the comments above, using <CFDiv> is only making things harder for you. If you switched to using one JavaScript library for your UI components (like jQuery/jQueryUI/jQuery plugins), and put all of the necessary code into your main page, what you desire can be accomplished fairly easily.
I found a simple work around... CFdiv creates what feels like a seperate browser window, but its not actually one. So it can't pull Javascript files in via:
<script type="text/javascript" src="/js/scripts/jquery-1.11.1.min.js"></script>
The above is telling the browser "go fetch this file" - but since your CFdiv is not really a browser (Its a controversial permutation of CFajax as described here) it doesn't do it.
Technically, the above makes the browser include it into the page, just as if you cfincluded it , or just pasted the Javascript in there.
So convert the above to:
<script type="text/javascript"><cfinclude template="/js/scripts/jquery-1.11.1.min.js"></script>
And included javascript will work! (provided there aren't any conflicts with cfajax et al)
I had a similar problem in that my jquery was not working, and doing this fixed it.
How these application allow users to upload their own templates? How is this possible?
Do they have some kind of a their own template engine or..?
Tumblr gives you two options to include your own theme:
If it is just for personal use: by changing the html of the theme. If you go to your tumblr-website and click on the customize button, you can edit the html. In the header file the content of your .css must be pasted between the <style type="text/css"> </style> tags. And you can add some javascript there. For the html I suggest to read the manual that Mirko Adari suggested: Tumblr Theme manual
If you want it to be a theme on itself: submit your theme to the Theme Garden: Tumblr Theme Garden
Blogger is a bit more rigid. Also there you can change your html file. Keep in mind that it's markup for posts is different then Tumblr. Also custom CSS files can be added (more information on that). If you are less familiar with css and html Blogger offers some buttons so that you can change the basics to your own needs. Blogger also offers a way to backup and restore your theme. A more detailed explanation can be found here. This template file must be an .xml file. More information on the markup of this xml-template can be found here.
I am looking for some info on JSP imports. I currently have a main.jsp. A jsp is loaded into a div using jQuery upon user selection of of an item. then inside of that div, a modal dialog is opened upon another selection, and a jsp is loaded into that. All the data is coming back ok, but the CSS formatting is off. Each of the JSPs has a head and body and can run separately. They look fine alone, but start getting different CSS attributes when together. Should I be able to strip off the head and body of the second and third loaded JSP, incude all the necessary js and css files in the main and have it work fine? Do I need to have the head and body tags? I am using a jQuery .load() call.
You do not need to include head and body tags in the content that is being loaded via the jquery load call.
When you do model popups, jquery moves your div markup to the end of the document. So if you had some css that was pretty specific, such as
#content #model { ... }
It wouldn't work because jquery will move the markup to the bottom of your page.
You don't need to have body or head tags for loaded pages.
Unfortunately if you want reliable cross-browser formatting for loaded pages it's better to go with inline styles for them. Not sure if IE9 will have this fixed, but I beleive earlier versions ignore style for loaded pages whether it's specified in the main page or loaded page itself.