1)If i scroll the browser, if scrollTop() is greater than 50px then nav bar will come down.
2)It is working in Mozilla, but it is not working in Google Chrome.
3)In this i have inserted two libraries a)jquery-2.1.3.min.js b)bootstrap.min.js
4)below is the script what i wrote.
$(document).ready(function(){
$(document).scroll(function(){
var scroll_top=$("html").scrollTop();
if(scroll_top >= 50){
$("nav.navbar-default").addClass(" navbar-scroll");
}else{
$("nav.navbar-default").removeClass(" navbar-scroll");}
});
});
5)Here's the fiddle http://jsfiddle.net/vamsivelaga/waL67pkb/
Use "body" or document instead of html.
var scroll_top=$("body").scrollTop();
or document
var scroll_top=$(document).scrollTop();
Fiddle: http://jsfiddle.net/waL67pkb/1/
Related
I am creating a website on Webflow, and I have no experience in codes. I added a basic setup of Scrollify, but I want it to work only on pc. On mobile, I want a basic scroll.
<script>
$(function() {
$.scrollify({
section : ".scrollsection",
});
});
</script>
It's working perfectly on pc, but on the phone, it brakes the website. I want to disable it on mobile and get the normal touch scroll back.
Tried to brake Scrollify with no existing section name:
<script>
$(function() {
var windowWidth = $(window).width();
if(windowWidth > 768){
$.scrollify({ section:".scrollsection"}); }
else{
$.scrollify({ section:".not-existing-section" }); } });
</script>
It stops whole scrolling on mobile. (But if I zoom in on the website on my phone, I can scroll normally.)
Is there a way to stop scrollify.js on mobile without blocking the whole scroll?
I saw the topic:
How to disable scrollify.js on mobile
but there is no answer.
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
I have the new invisible recaptcha working fine, but it puts the badge in bottom left or right corner. You can override this with "data-badge='inline'" and that pulls it into the form. Google is extremely vague on how to actually move it. You cannot hide it as google will not validate your form anymore. Soo...
THE ISSUE is I cannot seem to move it anywhere else on the page. I want to move it to the bottom of the page inside a div I created. Has anyone successfully done this? I tried appendTo but that does not work.
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
Any help would be great!!!
Thank you.
If you want to comply with Google Terms, then you can use a timer to detect the badge and then move it down at the bottom. You have to set the badge property to inline. jQuery appendTo worked for me:
Recaptcha code
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : '<your_site_key>',
'callback' : onSubmit,
'badge': 'inline'
});
};
The code to setup a timer to check and move grecaptcha-badge element
jQuery(function($) {
var checkTimer = setInterval(function() {
if($('.grecaptcha-badge').length > 0) {
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
clearInterval(checkTimer);
}
}, 50);
});
Please check my live example here (http://zikro.gr/dbg/google/recaptcha/). You can see that the badge goes at the bottom inside #g-badge-newlocation element and that it works because when you hit submit, recaptcha triggers the callback function which logs the word "success~".
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
i am trying to load external sites in a div on clicking to the respective tabs. i am new to ajax jquery cud any one can suggest for correct solution.
i have tried this
You can only do this using an iframe due to cross domain restrictions. See http://en.wikipedia.org/wiki/Same_origin_policy
To get around this you can change the #test element to be an iframe
and rather than ajax loading try something like:
$("#test").prop("src", link);
I've updated your fiddle to show a working example.
http://jsfiddle.net/Ztxsx/5/
Essentially all you need Javascript wise is:
$('#nav ul li a').on("click", function(e) {
var url = $(this).text();
var li_link ='http://www.' + url + '.com';
e.preventDefault();
$("#test").prop("src", li_link);
});