My code project on codepen has no working Javascript. The console.logs are not running within my javascript. I have a Div with the id and class set to "text1"
$(window).scroll(function(){
$(".text1").css("color: red");
});
const masterEl = document.getElementById('text1')
console.log(masterEl)
console.log("masterEl")
Related
my knowledge of web tech is mostly HTML and CSS.
I've used bootstrap and jQuery to allow the navigation to get stuck on scroll, it did for a while and then stopped once I started adding new pages. Here's my JavaScript:
$('.carousel').carousel({
interval: 5000 //changes the speed
})
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
Here's my web page where you can see the issue. What can I do about it?
Thanks in advance
In your javascript, you are looking to apply the class nav-bar-fixed to an element with the ID nav_bar. However, you don't have that ID put on any element.
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
But, when I add and ID to <nav> it works. It needs some modification to look good, but it does work then. <nav id="nav_bar">
I'm guessing that with the new pages you created, you just missed adding the ID or copied an older version of code, etc.
I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.
I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV
But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.
Here's the javascript:
var panel = $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
doc.scrollTop(currentScroll);
}
function stopDocScroll(){
currentScroll = doc.scrollTop();
doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
doc.off('scroll', resetScroll);
}
panel.on('mouseenter', function(){
stopDocScroll();
})
panel.on('mouseleave', function(){
releaseDocScroll();
})
Any ideas?
It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).
Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/
The Javascript:
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(".panel").on("mouseenter", function(){
$(document).on("scroll", function(){
$(this).scrollTop(0);
});
});
$(".panel").on("mouseleave", function(){
$(document).off("scroll");
});
});
Also gotta have that jQuery CDN in the html head section.
Here is fiddle example of something I would like to do. I want to mouse over element that is inside iframe (same domain) and then change color of the font. Like in example.
But in my version first the iframe is created after I push the button - my fiddle example. In my example mouseover wont work and I do not know why. I am not that experienced with JavaScript and can not figure it out on my own. Maybe what I want to do cannot be done or maybe I'm just missing something out.
function load_iframe(callback) {
$('#iframe').append('<iframe class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b>This is a test</b><br><b>Click here</b>');
})
return iframe
})
iframe.on('mouseover', 'b', function() {
$(this).css('color','red');
});
What I have done so far: Fiddle
this is simple code i hope to help you .... i am edit your code
var iframe
var a
function load_iframe(callback) {
$('#iframe').append('<iframe id="1a" class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b id="bb">This is a test</b><br><b>Click here</b>');
a=document.getElementById('1a').contentWindow.document.getElementById('bb')
alert('pass')
a.onmouseover=function(){
a.style.color="red"
}
a.onmouseleave=function(){
a.style.color="black"
}
})
return iframe
})
http://nggalaxy.ru/en/about-us/ - here is the example of exact behaviour to be implemented. When you scroll down the page, the side menu disappears and appears on top of the page.
How it can be realized using bootstrap for example?
Thank you.
Here is an example of raw Javascript + jQuery making this happen:
<script type="text/javascript">
$(window).scroll(function(){
var a = 112;
var pos = $(window).scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
This will add a CSS style if the user scrolled 112 pixel down. Like this you can create all styles for your menu.
In General: Use javascript to check on what scroll-position the user is, and append the styles or classes.
I have the below code. I'm trying to set a click event on the inner content of the iframe.
$(function(){
$("#popupIframe").load(function(){
var selection = $(this).find(".selectLocation").click(function(evt){
evt.preventDefault();
console.log("clicked");
});
console.log("this = ", $(this));
});
});
selectLocation is a class on a div element inside my iframe html. The above doesn't seem to work or at least the click event is not getting called. The console is tracing out the iframe selector.
This will only work on an iframe which has the same domain as the parent. Use contents() which you can then traverse just like any other object.
Example HTML:
<iframe id="fiddleframe" src="jsfiddle.net" width="400" height="400" />
Example JQuery:
$('#fiddleframe').contents().find('.pageHeader').css('border','3px solid red');
http://jsfiddle.net/AlienWebguy/Rbe2u/
UPDATE: A question was asked in the comments about using this practice on an iFrame that was created on the fly. To accommodate for JQuery-created iFrame, you need to ensure the iFrame's DOM has been loaded completely before you can apply any CSS manipulation.
$('#create').click(function(){
$('<iframe/>')
.attr({
id:"fiddleframe",
src:"jsfiddle.net",
width:"400",
height:"400"})
.appendTo('body')
.load(function(){
$(this)
.contents()
.find('.pageHeader')
.css('border','3px solid red');
});
});
http://jsfiddle.net/AlienWebguy/Rbe2u/1/
For anyone who is looking for the answer. This does not work for cross domain files.
$(function(){
$("#popupIframe").load(function(){
var $iframe = $(this.contentDocument||this.contentWindow.document);
$iframe.find(".selectLocation").click(function(evt){
evt.preventDefault();
console.log("clicked");
});
});
});
Thanks to HackedByChinese who posted it on this thread. How to find a div inside of an iframe