I am upgrading from Fancybox-2 to Fancybox-3. My site uses fancybox to display blocks of HTML as an overlay on page. For instance, if you click on my Terms and Conditions, fancybox uses a file fb/tandc.php that has all the HTML of the box to be displayed.
Some of the boxes use data from my database and use php programming to generate the HTML - for instance I have a list of participants retrieved from the database.
When planning the upgrade, I added a switch on my site that allows me to decide if I want to run version 2 or 3 of fancybox. In testing, many of the boxes display the same whether I use version 2 or 3 - in other words I have not changed the source code, only the way I call fancybox.
My problem is that for some reason, some boxes do not display the full content. When I have checked the page source, everything is there but I have noticed that some elements have style="display:none" defined. This is not coming from my code, so I assume fancybox is adding it.
My question, therefore, is how can I stop this?
I have tried to find answers but not successful. I did find a post that disabling AdBlocker in Chrome may help but this had no impact.
I get the same behaviour in Chrome and FF
I have included screenshots that show how the elements contain the style; the code used to call fancybox; the options I am using.
page debug elements
call to fancybox
options used
Just added this screenshot of code to be displayed. I tried adding a style that I hoped would override what fancybox is doing, but did not work either.
code to be displayed in fancybox
This is how the content looks in v2 fancybox
content in version 2
and if I have exactly the same content, but use v3 fancybox:
exactly same content in version 3
Using ajax to load fancybox with content from a file seems to create elements where it inserts style="display:none" - I have no idea why. However, I figured a work around where instead I created inline content on the page that is hidden and then simply used data-src="#hiddenContent" as in the docs.
It's made my page huge though when I have a lot of surveys, with a lot of participants on each!
Related
I have a website in wordpress. I recently download a plugin called Advanced Ajax Page Loader. It refreshes you content when clicked on other page without refreshing the whole site(header, footer). I tried to get my answer from plugins developer and wordpress support forum, but none responded.
I read that if ajax jquery call is used then all scripts should be reloaded again, for that the plugin have a place where I should put those codes. Until that everything works correctly, except one thin. When I go from a category to category, everything works fine, but when I open a single Post it completely screws up all my css for that page, when I refresh it, everything looks fine but then again, if I open one of the big categories with many posts, then that pages css is messed up.
I though that I could somehow refresh whole css by putting some code in the "Reload code" box, but I have no idea how to do that using scripts. English isn't my native language, therefore I'm having difficulty finding my answer on google, I tried, but my vocabulary is limited. How can I do it?
are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.
second try to validate your markup and CSS and see if you have any error in your css syntax ?
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.
I'm trying to display all node_edit form neatly within a lightbox without any of the excess content I don't want. No sidebars, footer, header, nothing. Just the content. So I created a page-node-edit.tpl.php file.
I have two problems daunting me, but for now I'll only mention the first since its more important.
1) From any drupal page, clicking on the "edit" link for the node doesn't activate the lightbox like it should. Instead it clicks-thru the link as normal.
With jQuery in the header I added a rel attribute for the lightbox to the links, but the box still doesn't activate. I tested the lightbox on a link I hardcoded into the page, and it activated just fine. For elements generated by Drupal, like the node edit link/button the problem seems to be timing.
I think the rel attribute needs to be built with the page, with the link, rather than appended onto it. The catch is, the link lacks an id and class, so I don't see how the hook_alter_link() function can help me.
I'm willing to try anything. Perhaps someone has done this before? Opened a node/edit form within a lightbox.
Any suggestions would be greatly appreciated.
I've seen the Modal Frame API used in a few modules (Node Relationships uses it to do something very similar to what you're doing); might be helpful...
http://drupal.org/project/modalframe
i want to make a css/jquery tabbed for an "Admin panel", so it will all be loaded without the need to refresh.
im going to do it dynamicly but its a small exercise site so i know ill have only 3-4 main "areas" to edit in the panel (the tabs in the top).
the thing is i have other links for each editing area.
is there a way to do it with jquery, without the need of putting all the code in 1 page, in 3-4 divs and make them all invisble except the tabed being choosen(like ive seen in examples)?
in examples i saw all the content in one page, and if adding the top tabs and also the pages of each area(lets say delete, edit etc) its alot of code.
is there a comfortable way of doing it, while being able to make it dynamicly in the future?
edit to answers:
i already made tab from the this tutorial:
http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the thing is, at first in the admin menu i have like 13-14 html pages(before it becomes php) with different operations.
how would you take 13 pieces of code(they have the layout and the admin+admin menu yet the content is changed) that should be in different files, and make them show up in the same tab?
would you have to split each code to only its div, and then load it someway?
from the tutorial above, they used all of the content in one page and used invisible......
how would you load 13 pieces?
Have a look at the jQuery UI Tab Widget:
you can load the tab content statically or dynamically with AJAX
it uses the jQuery CSS framework
it's easy and full of sample code