Apologies, I realise that similar questions have been asked on here, but I'm a coding noob attempting to build my first website. Basically, I'd like to offset my SmootScroll target to avoid my nav-bar obscuring content. Here's what my code looks like:
// Scroll
function InitScroll() {
$('body').smoothScroll({
delegateSelector: 'nav a',
speed: 2000
});
}
// Fixed Navigation
function initFixedNav() {
$(window).scroll(function(){
if ( $(this).scrollTop() > 0) {
$("#navigation").removeClass("top-nav").addClass("fix-nav");
}
else if($(this).scrollTop() <= 0) {
$("#navigation").removeClass("fix-nav").addClass("top-nav");
}
});
}
Related
I have 4 buttons on the page and if i click them, different data is displayed for each one.
What i want to do is have a method that clicks on button 1 and check if specified text is not displayed on the page, have it click button 2 and so on until the text is displayed. Text is not always displayed on the same button section so i am not able to hardcode this in, i must search for it. If i try to check if element.contains(text) it will give an error as it is not displayed and making if else statements using the contains.size different from 0 will always go to the last else. Any ideas?
Added some sample code of what i have tried. If i can get inside the IF block and stop successfully where the text is displayed, i will make a boolean and using that i can continue with a function
cy.get(button1).click()
cy.get("body").then(($body) => {
if ($body.find(specifiedText).length > 0) {
cy.get(elementThatContainsTheText).click()
// cy.get(specifiedText).click()
} else {
cy.get(button2).click()
if ($body.find(specifiedText).length > 0) {
cy.get(elementThatContainsTheText).click()
// cy.get(specifiedText).click()
} else {
cy.get(button3).click()
if ($body.find(specifiedText).length > 0) {
cy.get(elementThatContainsTheText).click()
// cy.get(specifiedText).click()
} else {
cy.get(button4).click()
cy.get(elementThatContainsTheText).click()
// cy.get(specifiedText).click()
}
}
}
})
cy.get(button1).click()
cy.get("body").then(($body) => {
if (cy.get(elementThatContainsTheText).contains("text") > 0) {
cy.log("text is not here")
} else {
cy.get(button2).click()
if (cy.get(elementThatContainsTheText).contains("text") > 0) {
cy.log("text is not here button2")
} else {
cy.get(button3).click()
if (cy.get(elementThatContainsTheText).contains("text") > 0) {
cy.log("i should be here")
} else {
cy.log("last else, why am i here?")
}
}
}
})
I personally don't know how much help I can get in this situation. I was trying to make a Flappy bird sketch off of Daniel Shiffman's videos using the p5.js web editor, however when the keyPressed() function was used (which I am familiar with because I did a bunch with Processing), I would get no response. Now originally, it was if(key === ' ') { that was being used, and when the space bar was pressed, the sketch would reset. However, when I tried with other letters, then eventually to just the keyPressed example from the reference, it still wouldn't do anything. It even worked on the website's example, however it wouldn't work in the web editor. What is happening?
Example code:
let value = 0;
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function keyPressed() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
}
Try this:
//in the draw function
if (keyIsDown(LEFT_ARROW /*or what ever*/)) {
//action
}
I want to set a kendo grid header fixed. After a lot of internet search I cannot find what I exactly want to do.
This post on telerik doc show how to fix header on top of window : https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/fixed-headers-grid
But it's not exactly what I want to do. I want the header fixed when scrolling the page on the location it is on the page load.
How can I do this ?
After hard work and insanity test I finally found how to fix this grid header. So I share it here because I think many people want to do this...
I rework the telerik tutorial a little for fix the header where you want, take in consideration if the grid has a toolbar and to be reusable :)
CSS :
.fixed-header {
position: fixed;
width: auto;
z-index: 10000;
}
Javascript ('#main-header' is the selector of my website main menu) :
/**
* Fix grid header
* #param {kendo.ui.Grid} grid - The grid
* #param {string} [selector] - The selector of the element which the header must be "stuck" on scrolling, by default the main menu
*/
function fixGridHeader(grid, selector) {
var wrapper = grid.wrapper,
toolbar = wrapper.find(".k-grid-toolbar"),
header = wrapper.find(".k-grid-header");
function resizeFixed() {
var paddingRight = parseInt(header.css("padding-right"));
header.css("width", wrapper.width() - paddingRight);
}
function scrollFixed(selector) {
var offset = $(selector ? selector : '#main-header').offset().top + $(selector ? selector : '#main-header').outerHeight(),
tableOffsetTop = wrapper.offset().top,
top = $('#main-header').height() + (selector ? $(selector).height() : 0);
if (offset >= tableOffsetTop) {
header.addClass("fixed-header");
if (toolbar.length > 0) {
toolbar.addClass("fixed-header");
toolbar.css({ 'top': top, width: "100%" });
header.css({ 'top': top + toolbar.innerHeight() });
}
else {
header.css({ 'top': top });
}
}
else {
header.removeClass("fixed-header");
if (toolbar.length > 0)
toolbar.removeClass("fixed-header");
}
}
resizeFixed();
$(window).resize(resizeFixed);
$(window).scroll(function () { scrollFixed(selector); });
}
After grouping, is there a way for expand/collapse icon of current row not automatically expand/collapse all of the subgrid's rows? Just leave it alone as it was.
var parmColumnName = 'Model';
$('#test').jqGrid('groupingGroupBy'),
parmColumnName,
{
groupCollapse: true,
groupField: ['name']
}
);
//Original setup after playing around with it. (See X5 under BMW)
//Collapse the grouped Make
//Then Expand the grouped Make (All of the model are expanded by default, I do not want it to change and I want it to look like the original snapshot above)
I find your question very interesting, but the solution for the problem is not easy. In my opinion the source code of two jqGrid methods groupingRender and especially groupingToggle should be changed. The solution which I suggest you can see on the demo. The demo overwrites the original code of groupingRender and groupingToggle methods. More full description of my suggestions you will find below.
First of all I want to describe the problem in my words. You used the words "the subgrid's rows" in the text of your question which bring misunderstanding. What you use is multilevel grouping. The first problem in my opinion is the behavior of groupCollapse: true option. In case of multilevel grouping jqGrid collapse currently only data instead of all grouping headers till the top level. The demo uses 3-level grouping and the option groupCollapse: true. It dysplays
instead of intuitively expected
Another problem which you formulate in your question is the current behavior of expending. The problem is that if the user have collapsed the nodes to that all looks compact, like on the last picture which I posted, end then the user expand some node jqGrid expand all children grouping headers of the node till the data. So if one expand for example only "test1" node then all its children nodes will be expanded instead of expending only the next grouping level.
To fix the first problem (opened sub-grouping headers in spite of groupCollapse: true) I changed one line of groupingRender method from
str += "<tr id=\""+hid+"\" role=\"row\" class= \"ui-widget-content jqgroup ui-row-"+$t.p.direction+" "+clid+"\"><td style=\"padding-left:"+(n.idx * 12) + "px;"+"\" colspan=\""+colspans+"\">"+icon+$.jgrid.template(grp.groupText[n.idx], gv, n.cnt, n.summary)+"</td></tr>";
to
str += "<tr id=\""+hid+"\"" +(grp.groupCollapse && n.idx>0 ? " style=\"display:none;\" " : " ") + "role=\"row\" class= \"ui-widget-content jqgroup ui-row-"+$t.p.direction+" "+clid+"\"><td style=\"padding-left:"+(n.idx * 12) + "px;"+"\" colspan=\""+colspans+"\">"+icon+$.jgrid.template(grp.groupText[n.idx], gv, n.cnt, n.summary)+"</td></tr>";
The main problem which you asked was a little more difficult. Below you can find the fixed version of
$.jgrid.extend({
groupingToggle : function(hid){
this.each(function(){
var $t = this,
grp = $t.p.groupingView,
strpos = hid.split('_'),
uidpos,
//uid = hid.substring(0,strpos+1),
num = parseInt(strpos[strpos.length-2], 10);
strpos.splice(strpos.length-2,2);
var uid = strpos.join("_"),
minus = grp.minusicon,
plus = grp.plusicon,
tar = $("#"+$.jgrid.jqID(hid)),
r = tar.length ? tar[0].nextSibling : null,
tarspan = $("#"+$.jgrid.jqID(hid)+" span."+"tree-wrap-"+$t.p.direction),
getGroupingLevelFromClass = function (className) {
var nums = $.map(className.split(" "), function (item) {
if (item.substring(0, uid.length + 1) === uid + "_") {
return parseInt(item.substring(uid.length + 1), 10);
}
});
return nums.length > 0 ? nums[0] : undefined;
},
itemGroupingLevel,
collapsed = false, tspan;
if( tarspan.hasClass(minus) ) {
if(grp.showSummaryOnHide) {
if(r){
while(r) {
if($(r).hasClass('jqfoot') ) {
var lv = parseInt($(r).attr("jqfootlevel"),10);
if( lv <= num) {
break;
}
}
$(r).hide();
r = r.nextSibling;
}
}
} else {
if(r){
while(r) {
itemGroupingLevel = getGroupingLevelFromClass(r.className);
if (itemGroupingLevel !== undefined && itemGroupingLevel <= num) {
break;
}
$(r).hide();
r = r.nextSibling;
}
}
}
tarspan.removeClass(minus).addClass(plus);
collapsed = true;
} else {
if(r){
var showData = undefined;
while(r) {
itemGroupingLevel = getGroupingLevelFromClass(r.className);
if (showData === undefined) {
showData = itemGroupingLevel === undefined; // if the first row after the opening group is data row then show the data rows
}
if (itemGroupingLevel !== undefined) {
if (itemGroupingLevel <= num) {
break;// next item of the same lever are found
} else if (itemGroupingLevel === num + 1) {
$(r).show().find(">td>span."+"tree-wrap-"+$t.p.direction).removeClass(minus).addClass(plus);
}
} else if (showData) {
$(r).show();
}
r = r.nextSibling;
}
}
tarspan.removeClass(plus).addClass(minus);
}
$($t).triggerHandler("jqGridGroupingClickGroup", [hid , collapsed]);
if( $.isFunction($t.p.onClickGroup)) { $t.p.onClickGroup.call($t, hid , collapsed); }
});
return false;
},
});
The demo demonstrates the results of all changes which I suggest. I'll post the changes as pull request to trirand. I hope that the changes will be included in the main code of jqGrid.
UPDATED: I posted the pull request with the changes which I suggested above.
UPDATED 2: My pull request was merged with the main code of jqGrid. The new 4.5.4 version of jqGrid published today includes the changed. The new demo uses jqGrid 4.5.4 and it works like you expect. So to fix the problem which you described in your question you need just update jqGrid.
I'm loading a page into a div. I'm also attempting to establish a waypoint, so that when the user scrolls down the page, the menu will change colors.
The problem I am having is the new height of the div is not recognized by the browser once the ajax content is loaded.
Here's what I have:
$(".cta").live('click', function () {
$('#faq').load('about-us/faqs/index.html'),
function () {
$("#faq").waypoint(function (event, direction) {
if (direction === 'up') {
$("#siteNav li a").removeClass("siteNavSelected");
$("#siteNav li.nav3 a").addClass("siteNavSelected");
}
}, {
offset: function () {
return $.waypoints('viewportHeight') - $("#faq").outerHeight();
}
});
}
return false;
});
Any ideas? Thanks.
Use $.waypoints('refresh');, from the documentation:
This will force a recalculation of each waypoint’s trigger point based on its offset option. This is called automatically whenever the window is resized or new waypoints are added. If your project is changing the DOM or page layout without doing one of these things, you may want to manually call it.
I'm not familiar with the intrinsics of the waypoint plugin, but you could also bind a scroll event and then capture the .scrollTop() value. Would look something like this:
$(document).bind('scroll', function(event) {
var scrollTop = $(window).scrollTop();
if (scrollTop < 1000 && $('siteNav li').hasClass('styleA')) { return; }
else {
$('siteNav li').removeClass('styleB');
$('siteNav li').addClass('styleA');
}
if (scrollTop > 1000 && $('siteNav li').hasClass('styleB')) { return; }
else {
$('siteNav li').removeClass('styleA');
$('siteNav li').addClass('styleB');
}
});
You have to play with the values a little to get it acting at the right spot. Also you have to use a greater or less than value in the test as if a user is at the top of the page and uses the scroll-wheel on his mouse to fly down the page, you don't get every value in between.