Add a bottom border to displayed webview - javascript

My webview is using horizontal scrolling like a book to show the HTML contents. I am using scroll function to do this. My question is, how can I add a bottom border on every page using JS or jQuery?

I recommend using css to accomplish this. If you want your page's body to have a border, you would simply add this rule to your css:
body {
border-bottom:5px #f00 solid;
}
To accomplish this same result using jQuery, add this to your scripts:
$(document).ready(function() {
$('body').css({'border-bottom':'5px #f00 solid'});
});
Let me know if this accomplishes your goal!

Add a class to every page, then use that to add a border to all of them at once.
If the class name is page, then use this jQuery:
$(".page").css("border-bottom","1px solid black");
You can use any border style.

Related

Image Slider with border colour

Recently I'm using an image slider to my angular project then I need to add the background colour to each images' border like my attachment. I used custom CSS class to fulfil this but I cannot find way to apply this class correctly. But when I using DOM I can do that, My CSS class is as follows
border-boundry{
border-style: solid;
border-color: red;
}
NPM Package Link: https://www.npmjs.com/package/ng-image-slider
Demo: https://sanjayv.github.io/ng-image-slider/
What if you use one of the classes you have on the right like ng-image-slider-container ?
Try to add "background-color: red;" on the class ".ng-image-slider", is this what you want to do ?
It is very possible that the library you're using is enforcing css rules with !important flag. So you can either try to override it with !important yourself (not recommended ), or try to use already existing classes by adding more css to them...
Add the following lines in the styles.css of your angular app. With this you get the selected image surrounded with a frame.
.selected-image {
border: 1px solid lightgrey;
}

Why jQuery .addClass() could be beneficial than modify HTML directly

I am really green to jQuery and when come across these two methods, I do not know why it is useful.
.addClass() and .removeClass()
Yes, I can add the class in my js file. But why would it be beneficial? Is it because we are not suppose to modify the HTML?
The case I have:
In HTML:
<div id="title" class="highlighted">I'm highlighted!</div>
In CSS:
.highlighted {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
If I want to add .highlighted to any div in my HTML, I can simply add it like this:
<div id="text" class='highlighted'>Highlight me, too!</div>
Why do I need to bother do this in my js file?
$('#text').addClass('highlighted');
Because you might want to add the Class when something else happens, maybe when clicking on the div.
$("#text").click(function(){
$(this).addClass('highlighted')
})
The addClass()/removeClass() methods come in handy when you are trying to dynamically add/remove a class that an element might not originally have.
This comes in handy when let's say you select an element and you want to add a highlighted class to convey a selection. It's a great tool to use when you want to change things around when you have good user interaction so you can return immediate feedback to a user given their choices.
You would use addClass and removeClass for dynamically created elements, animation effects, or as the result of an event.
Dynamically created elements:
Example, if you click a button that creates a div on your page. Perhaps later you need to apply a class to the div.
Animation effects:
You can use addClass to animate position and colors of elements. One example on the top of my head is parallax scrolling websites, where when you reach a certain location, an effect is applied. In addition, removeClass could then be called when scrolling back up to reverse the effect.
Result of an event:
Adding a click event to a button that adds a class to change an elements color, font size, etc.

Javascript/Jquery on event trigger <div class=>

I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake
It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.
I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.

jquery ui resizable weird white patch in the middle of the div

i'm playing around with jquery ui resizable with the default example from jquery ui's site and i noticed a white patch in the middle of my div:
the white patch is only visible if i put a background color to my div such as:
background-color: cyan;
jsfiddle:
http://jsfiddle.net/9aQUz/
anyone knows what's going on?
thanks in advance
In your sample, you've given the div the "ui-widget-content" class.
In jqueryui, this class has the following background defination.
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
In the base theme, this is just a white image.
You shouldn't need to assign jquery classes to elements. Whenever you call the function, it'll happen automatically.
This comes from jQuery's theme. It inserts a 40x100 image (http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) as the background for the class .ui-widget-content. It's done automatically when you use the resizable widget.
If it really bugs you you can override it by adding background-image: none; to your rule.
jsFiddle example
It works perfectly if you have the css there instead of pulling it in:
Fiddle

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/

Categories