Foundation Reveal is removing DOM - javascript

i don't know if it's a bug or glitch. but when i try to make a reveal component the usual way by adding data-reveal attribute on it, it always removes the Reveal DOM . it's weird because it's working on most pages, but not in page1.
i can't reproduce the bug because i used the common way of doing it.
what's happening is when the document loaded, it instantly removes the reveal DOM.
i also tried removing the data-reveal attribute and instantiate a new one via javascript like this
var elem = new Foundation.Reveal($modal);
console.log(elem);
well of course it would instantiate, but when i looked at my page DOM, it's gone!
please help. i checked all my js files. and there's nothing wrong that could remove the Reveal DOM
See the attached picture. black is my html code and the white is chrome's debugging console

This is "by design". Foundation first removes reveal container and then appends it back to either body element or the created overlay. The same thing should be happening on your other pages. If you need additional content is should go inside the reveal DIV, not the parent. There should be no reason to wrap reveal in any additional DIVs.
See foundation.reveal.js, line 67-72.
if(this.$overlay) {
this.$element.detach().appendTo(this.$overlay);
} else {
this.$element.detach().appendTo($('body'));
this.$element.addClass('without-overlay');
}

Related

IE11 renders page incorrectly in an inactive tab

The problem is I try to render an iframe with some another page inside of it.
The code looks a bit like this:
<div>
<iframe></iframe>
</div>
The outer div is abolutely positioned and has width and height. The iframe and div are created dynamically.
The problem is inner html tag's top, when it's rendered, positioned above the iframe top, making all inner content to render incorrectly. And it is positioned static and have no css rules that could possibly move it to the top. Or sometimes it could be only the inner content, in the body, or the upper rendered div inside of it, on the second nesting level, while the other elements on the above levels being rendered correctly.
This issue reproduces in IE only (I'm not sure if this is 11th version only) and only when you you have some other tab selected while it loads in another, inactive tab.
I also couldn't reproduce this issue in JSFiddle or anywhere else by having some similar constructs. And I can't give real code from the production enviroment.
I know, it is crazy to ask people to help with such lack of information, but I hope, someone had the same issue and knows how to solve it, because I'm really out of ideas.
Does anyone know how this issue could possibly be solved?

Inline style element appers in develoer window but not when viewing source code

I am looking at a form that has a captcha. The CSS being applied has made it all whacky looking. I'm about to diagnose the issue, and I'm looking at the styles being applied in my Google chrome developer window. For each individual rule, there is light grey text in the top right of the box that says where the code came from. The one rule I'm interested in indicates it came from <style></style>, which I assume is an inline style rule. Clicking on the source, it takes me to the <style> element that is defined and sure enough the rules are there. These rules don't exist in the source file, so I'm pretty sure the element is appended through javascript. When I hit ctrl + u to view the source code, the <style> element is not there.
How can I see an element that exists in the developer window without it existing in the view source code?
Elements created by JavaScript are not visible in source code, that is because they are created dynamicaly, and when you use "view page source" then you get source code of page returned by server without executing JavaScript.

Hover function not working dynamically for each entry

So, I'm working on a page and am having a slight issue with setting up a hover funtion dynamically. What I am trying to do is for each entry, create a hover function. I tried everything I could think of but it always seems that each entry gets assigned the same hover function. So, I came to the solution I have now which works in jsfiddle but not on the website I made.
Is there a better way to create a dynamic hover function, or how can I get this to work? Any help is appreciated.
Link to fiddle
Link to website
This has nothing to do with ExpressionEngine, it doesn't even need to be done with Jquery and can be done purely with CSS.
The problem is you're outputting the JS with every loop of the channel entries instead of using a centralised JS file in your head or bottom of the body html, similar advice would be to move the CSS into a general CSS file instead of inline.
.MF {
hide the rollover text
}
.MF:hover {
hide the title and sub-title
show the rollover text
margin-left the arrow
}

How To find out what is hiding/acting on a html element

I have a simple <a> tag that is getting hidden from some JS. (display:none)
I have looked into the page source and I can see it is not hidden, however the inspector shows it as display:none ( inline style )
No result finding out the class/id in JS code in order to isolate the part of the code that is hiding the <a>.
Is there a tool or fixed procedure that can help me to debug this?
Chrome lets you break code when an attribute on an element is changed.
Open the developer tools using F12, and select the "Elements" tab. Find the element that gets hidden. Right click on it, "Break on", "Attributes Modification".
Refresh the page, keeping Developer Tools open.
If the element is being hidden using JavaScript, you'll break at that point.
Otherwise, it's done via CSS. If this is the case, using the "Elements" tab again, select the element you're interested in and look at the "Styles" applied to it in the right hand column. Chrome will show which styles are applied by which definition in which stylesheet. It should then be trivial to find the one hiding the element.
First of all, look if it is hidden from inline style or by a css class.
Then, if is by a css class, search in all your project for that class (you should find a javascript function that adds this class to the element).
If is hidden by inline style property, look inside your project for any .style.display = property.
If you are using jquery try like this:
// Search by class
.addClass(".hiddenClass
// Search by css
.hide(), or $(".elementSelector").hide()
Firstly make sure that it is indeed javascript that hides your element, as it could easily be css. The easiest first step is to check the element and see if by any chance its default css is hiding it.
Second. Is your js code in one file or do you import multiple js files in your page?
If you have multiple js files you could try.
Import 1 file
then use javascript to Show your element
then import the rest of the files.
If the code that hides your element is located in the first file then your element will be visible (because you made it visible after hiding it first)
if the element is not visible it means that the hiding takes place in a subsequent file.
Move your javascript code showing the element after the second import and so on...
Last but not least make sure your code does not import external css files as well.
I recommend using Chrome Dev Tools for any javascript debugging you do.

How to 'unrender' MathJax equations?

We all know that MathJax renders elements on window onload by default (and can be refreshed using MathJax.Hub.Queue(["Typeset",MathJax.Hub]); Reference Link), but is there a way to 'unrender' the elements? So for example, after the page just loaded, I can click a button, and all the elements will turn back into their TeX code. Is that possible?
Well, the original TeX code is stored by MathJax, so you can use some javascript to put it back. There is an example of how to do this on the MathJax users forum that I think may be what you are looking for.
It seems that MathJax hides the original LaTeX code in an element called MathJax-Element-x, which contains the original code. So what I did was simply hide all elements with the class MathJax_Display, in which the formatted version appeared, and showed all elements starting with MathJax-Element-. Seemed to work fine.
EDIT: Instead of selecting MathJax_Display elements, I had to select all the elements inside MathJax_Display, like MathJax_Display *. I also had to change the type of element the LaTeX code was put in, as it was in a script.

Categories