JScrollpane will not style scrollbar - javascript

I have a div that I need to be able to scroll. Unfortunately the default browsers are very ugly, an ordeal I am trying to use JScrollpane to get around.
It doesn't seem to cooperate with me however: I have added the necessary links, along with JQuery ofcourse
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
Which are corresponding to my file structure, and have called the script using
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
$('.work-description').jScrollPane();
});
</script>
My div also seems to be in place:
<div class="workdescription" id="Plumbing">
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
With a CSS value of overflow:auto;
I've also tried overflow:hidden; but that hasn't worked either. I am still stuck with the ugly scrollbars.
I've received no JScript errors. What's up with this?

I've used jScrollPane before and you basically need a container, a paragraph which will be used as a wrapper, and then a call to jScrollPane which you also need to reinitialize if the container that will have a scrollbar is from an ajax response.
Based from your code I'll assume that your html look something like this:
<div class="workdescription" id="Plumbing">
<p>
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
</p>
</div>
Then your selector, just include the script after the html so you won't need to wrap your script on window.load().
<script>
$('.workdescription').jScrollPane({autoReinitialise: true});
</script>

The class name is "workdescription" in you HTML, but you used ".work-description" as your selector. It seems that's the problem ;)

Related

Dynamically Adding an MDL Text Input via JavaScript, not via AJAX

Dynamically adding a text input via AJAX and using the componentHandler.upgradeDom() works well.
However, when I clone a text input using JavaScript alone, that function doesn't help.
<html>
<head>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-amber.min.css">
</head>
<body>
<div id="formElements">
<div class="formElementGroup">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="Q1">Question</label><input type="text" class="mdl-textfield__input" id="Q1" name="Q1[]">
</div>
</div>
<div id="Qs1"></div>
<div align="left">
<a id="Btn-addQuestion" class="Btn-addQuestion">
Add another text field
</a>
</div>
</div>
<script>
$(document).ready(function(){
$("#formElements").on("click", ".Btn-addQuestion", function(){
clonedTxtBox = $("#Q1").parents(".formElementGroup").clone(true);
clonedTxtBox.appendTo("#Qs1");
setTimeout(function(){
componentHandler.upgradeDom();
}, 1000);
});
});
</script>
</body>
</html>
I expect that the label of the cloned text input move upwards and become smaller as it is designed to behave. However, only the original one does-- the cloned one doesn't; it rather sticks over the text-input even if the user types something inside.
Any help would be appreciated.
JS Fiddle:
https://jsfiddle.net/jp26f0ts/
I found the solution somewhere online.
Before upgrading the DOM, I should have added this:
clonedTxtBox.find('.mdl-textfield').removeClass('is-upgraded').removeAttr('data-upgraded');

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

MVC - Javascript events on elements in partial view

I can't seem to get my js event fire successfully on elements that are found in partial views. It probably has something to do with the way the partial views are loaded, so the elements may not be in the DOM when document.ready is fired.
Clicking on the button only hides the element which is found in the main page (menu-panel2).
What approach to this am I missing?
Main Html:
<body>
<script src="#Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/main.js")" type="text/javascript"></script>
<div id="upper-menu-container">
#{Html.RenderPartial("_Menu");}
</div>
<div id="upper-menu-container2">
#{Html.RenderPartial("_Menu");}
</div>
<div id="header-wrapper"></div>
<div id="menu-panel2">
Hide me - Hide me
</div>
<div id="content">
<input type="button" id="testbutton" value="click me" />
#RenderBody()
</div>
</body>
</html>
Main.js:
$(document).ready(function () {
$("#testbutton").click(function () {
$("#menu-panel").toggle();
$("#menu-panel2").toggle();
});
});
Partial View:
<div id="menu-panel">
Hide me
</div>
Ahhh... I just found the problem, which was caused by having two identical partialviews, which probably loaded several elements with the identical id to the DOM.
Case closed!
Try to put this line:
<script src="#Url.Content("~/Scripts/main.js")" type="text/javascript"></script>
in the end of file.
I have some templates that just work like this.

colorbox not working within ExpressionEngine embed (youtube pop-up)

right off the bat, I want to explain that I am a total newbie at web design. On that note, I think that I have come across a problem that is beyond my conceptual skill level.
For starters, I have successfully implemented colorbox with an embed youtube video with the following code:
<head>
{js}
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/testStyle'}" />
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:435, innerHeight:344});
});
</script>
</head>
<body>
<p> <a class="youtube" href="http://www.youtube.com/embed/" title="horses">
<img src="/uploads/features/featured-block-1.jpg" /></a></p>
</body>
This code works exactly as I would like it to (i.e. it pops up the video which I can then close by clicking outside the box.)
However when I try to embed this code within another block of code using ExpressionEngine I have new problem: when I try to close the pop-up window, the background stays opaque so that i can no longer see the original webpage. Obviously, something is conflicting in the background, but I just have no idea as to what that conflict might be.
Here is the code surrounding the embed (I mark the embed with dashes):
<head>
</head>
{favicon}
{global_stylesheets}
{js}
<body class="technology">
<div id="wrapper">
{embed='embed/header'}
<div id="masthead">
{embed='embed/nav'}
<div id="banner">
<div style="display:none;">
</div>
</div> <!-- END div banner -->
<br style="clear: left;" />
</div> <!-- END div masthead -->
<div id="content-main">
<div id="content-col1">
<h3></h3>
<div id="lead-sentence">
</div>
<div id="main-body{if subpage_graphic != ''}-graphic{/if}">
<h1> Hello world and welcome to my link!</h1>
------- {embed="in-store-analytics/testing2"} --------
</div> <!-- END div text-content -->
<br style="clear: both;" />
</div> <!-- END div content-col1 -->
{embed="embed/crosslinks"}
<br style="clear: both;" />
</div>
{embed="embed/footer"}
</div> <!-- END div wrapper -->
Again, when I click on the linked image, only a black background appears which I cannot get rid of. Any ideas about what might be conflicting in my code so as to make the embed no longer work or ideas how to go about finding out?
Thanks in advance.
It turns out that one of my embeds was calling the Raphael library, which meant that the library was being called twice. Though I know it's not best practice, I still don't understand why this would result in such radically different functionality.

How to hide certain html that is not surrounded by <noscript> tags if javascript is disabled?

<html>
<head>
<script type="text/javascript">
// jquery and javascript functions
</script>
</head>
<body>
<fancy-jquery-ajaxy-html-section>
</fancy-jquery-ajaxy-html-section>
<noscript>
sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
</noscript>
</body>
</html>
I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.
But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.
It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.
A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.
Is there a way do that?
The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.
EDIT: just a little example
<div>Everyone sees this div</div>
<div id="mydiv" class="hidden">You see this div only with JS enabled</div>
<script type="text/javascript">
$("#mydiv").removeClass("hidden");
</script>
<noscript>
<div>You will see this div only with JS disabled</div>
</noscript>
And, of course, in your CSS:
.hidden
{
display: none;
}
You could hide your fancy section using css:
<div id="fancy_jquery_ajax" style="display: none;">
</div>
then you could use use JavaScript to display the element:
$("#fancy_jquery_ajax").css("display", "block");
I hope that's right, I actually don't use jQuery that much. :S
Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.
What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.
<body onload="allowlogin()">
<div id="maindiv" style="visibility: hidden;">
...
</div>
<div id="nojsdiv">
The training system requires javascript to be enabled.
</div>
</body>
I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page
Here's how I would approach your problem:
<html>
<head>
<style type="text/css">
.js #fancy_jquery_ajax {display: none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready
});
</script>
</head>
<body>
<div id = "fancy_jquery_ajax"></div>
<noscript><!-- stuff to say if use had javascript disabled --></noscript>
</body>
</html>
It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.

Categories

Resources