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
}
Related
I'm using addthis.com to generate social media share buttons, however, their buttons come with an animation on hover which I really don't like and would like to remove it if possible.
You can see the issue live here - http://onyx.space/image/4
The problem is that the only code I've been given is this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b50a10e742393c0"></script>
And the code for the buttons:
<div class="addthis_inline_share_toolbox"></div>
There is some customization on their website, however, there's nothing about animations. I've googled this issue and found nothing about it.
I wonder whether the animation comes from the JavaScript and how would I go about finding it and removing it.
you can override that animation with more specific selector. for example add below css code in your css file
div .at-resp-share-element .at-share-btn:focus,
div .at-resp-share-element .at-share-btn:hover {
transform: none;
}
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');
}
I am building a website, which is having parallax effect,its almost done but i have an issue with that ,at a particular part I have some lengthy texts (hence scroll bar also present),now when i scroll the text ,the text scrolls as well as background also scrolls (which I don't want).I have tried putting things like position:fixed but it does not work.However I have observed that by disabling(not at all adding it in the index page) a particular .js (say custom.js) I achieve what I want.
My requirement is like when i hover upon the text area ,the background to be fixed(no scrolling) but text to be scrolling and when I come out of the text area,it should be like the previous case(background scrolling possible).Is it possible to disable a particular .js WRT mouse events.I have already tried a few online solutions on how to disable js and reload js but none works for me,am new to js does know much either .I have also read online that once js loads its effects cannot be removed(sticks to memory kind of thing),completely puzzled!
Any help
HERE is a SOLUTION
If you want to stop a script you can wrap your <script> tag by <noscript> tag using jquery wrap() function.
Here is an Example.
with scroll example too.
I want to put a switch for my website that when you click it the language of the page change. Yesterday I saw a close live example in a website.
Here's the link: http://iranfilm76.com/
The object on the left side in the header is exactly what I'm trying to achieve, but instead of changing the background i want to change the language.
I already have the functions for changing the language, my problem is the object, I download the image and css for the file.
I take a close look at the codes with firebug and when you click on the tag the class of the tag changes to class="changestyle".
How can I do this? Thanks for any suggestion.
YOUR_ELEMENT.addEventListener("click", function(){
this.classList.toggle("changestyle");
});
Demo: http://jsfiddle.net/DerekL/KpwkG/ | http://jsfiddle.net/WsGGa
For a non pure javascript approach, you can try selecting your toggle element using jquery like so:
$('element').click(function(){
$(this).toggleClass('language');
});
Then in your CSS you can apply whatever rules you want
I have a webpage... http://beta.charmscorp.com/inspect/projects.php - this webpage is in beta and doesn't currently look super professional and is only half working, also, the server internet connection is slow so it takes a bit to load up the elements properly.
Anyways, this page calls other pages through ajax to display in a div. My problem comes from wanting to use jquery to apply css to a table on a page which dynamically loads up in a div. If that sounds confusing, go ahead and go to the link I posted above, click the down arrow in the sidebar, and chose a link... Assets for example. you will see this page load up, and anything on this page won't have jquery applied to it.
From looking at solutions, I see I can add a .live() jquery function, but this seems to apply only to events and selectors. Anything i can do?
ps. this is what I've tried to do:
$("#maintable").live(function(){
$(this).corner();
});
This works on the main page, as you can see, there are rounded corners for the main table. However every table has the same ID, and yet, they don't have rounded corners...
You have an ID problem, it seems. There should never be two elements with the same ID. That said, you need to configure your server-side code so that the markup served to the AJAX request gives these tables a class attribute. Something like class="rounded". Then you can use jQuery to apply the style like this...
$("table.rounded").corner();
Note you will have to make this call each time you "reload" the div with fresh markup, which can be done globally using the ajaxComplete function...
$("table.rounded").ajaxComplete(function() {
$(this).corner();
});
"every table has the same ID"
IDs are supposed to be unique. jQuery sees the first id and quits. Change those "ids" to classes and you'll be good to go.