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.
Related
I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.
There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.
You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}
You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/
Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.
So we have a fixed header element, that will house the navigation and breadcrumbs.
While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.
Is this possible?
I appreciate any help or suggestions.
I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.
I would use those to determine whether an element is in the viewport or outside of it.
If you are okay with using a plugin you should go with the JQuery isInViewport plugin :
https://plugins.jquery.com/isInViewport/
You can also take a look at the raw code and change it to your liking.
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
}
i have a web app that has content like a facebook wall. when you click a button it adds more content at the end of the current content then should scroll to it. but currently if im scrolled any amount down, when i add the content the page suddenly scrolls down a seemingly random amount, and I have not added the scroll-to code yet. Why is the page auto scrolling? and how do i get it to stop?
The simplest way to do this without looking to far into what your code might be would just be offsetting what you add. So using some js find out the height the new content would add and then when you add it, scroll down that amount
While I'm not exactly sure why it's happening, I do know that you should be able to play around with CSS to avoid any scrolling while adding content to the page. If you set the body overflow to hidden PRIOR to adding the content, then setting it back to visible afterward, you should be able to prevent any scrolling from happening.
If you're using jQuery, something like this:
$(document.body).css('overflow','hidden');
// do your stuff here e.g.
for(var i=0;i<1000;i++) {
$(document.body).append('<div>some content to append here</div>');
}
$(document.body).css('overflow','visible');
NOTE: if it's a 3rd party library that's appending the content and they're using JS to scroll the page, this solution may not work.
Okay, so first some background info: I am trying to embed a webpage within another page. The sub-page is basically a small web application written in javascript and html that takes in several screens of input (radio buttons, text boxes, etc.) and gives a screen with results at the end. Each of these screens can be a different size.
There are two methods I have tried using to do the embedding:
1) Copy all of the html and javascript from the sub-page into the main page and stick it in a div/table/whatever.
2) Keep the sub-page in its own file and embed it using embed/object/iframe.
Using the first method the page behaves as it should; the only real problem (aside from being kind of a messy solution) is that the sub-page I am embedding is actually generated by an external application, and every so often the page is replaced with a newer version. This more or less rules out using the first method as a long-term solution.
Now the second method has its own problems. Since the embedded javascript page changes in height, the frame that is holding it needs to vary in size with it. I'm able to change the size using any of the solutions given here, however these do not update the size of the frame as the user progresses through each screen.
The closest solution I've been able to come up with so far is using a document.onclick handler to catch any clicking which might cause the next screen of the sub-page to come along. The handler pauses for a very short time (to allow the next screen to come up) and then calls the necessary resizing function. However this feels like a very hacky solution, and there is also a slightly noticeable delay during with the scroll bar shows up on the side of the frame when it hasn't expanded yet to fit the new content. I'm thinking there must be a better way to do this.
If the file is on the same server/domain, you could just load it in with jQuery. Here is some jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>
Just change id-of-div to the id of the div that you want the page to be loaded into and change /path/to/page.html to the actual URL to the page. (you don't need the domain of it, just the path to it)
I hope this helps.
If this answers your question, please remember to click the checkmark next to this to accept this answer.