I have looked at css filters "invert" but i'm struggling to think how a can target all my images (which have the Id=images) to invert with a click on text link. I'd also need to be able to second click the link to remove the invert filter. If anyone has an idea that'd be great.
FYI:
All my image are tagged Id=images and are all in the same div.
The invert link (text) has it's own div which is fixed, z-index 2000.. (front layer)
Thanks
http://jsfiddle.net/hu8tn0qb/1/
Turn all your id="images" into class="images" (you can't use an id more than once), then add in the code below.
The first block of code is the jQuery that will add the "inverted" class to all images with the class "image" when the div with the id "invert_btn" is clicked. By using .toggleClass it will remove the class when clicked a second time.
$('#invert_btn').click(function() {
$(".images").toggleClass("inverted");
});
.inverted {
-webkit-filter: invert(1);
filter: invert(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="invert_btn">Click Me</div>
<img src="http://placekitten.com/g/200/300" class="images" />
<img src="http://placekitten.com/g/200/300" class="images" />
Related
I am trying to create custom button for pinterest. I was able to use a custom image as a button but it is not working properly.
Here is the CSS I am using.
span[data-pin-log="button_pinit_bookmarklet"] {
}
span[data-pin-log="button_pinit_bookmarklet"]::after {
content: url('../images/icon.png');
}
In the ScreenShot I have marked the button I am working on using red color. I have marked the areas I want to get rid off using blue color.
I am stuck on this problem for more than 12 hours. So, any help will be really appreciated.
You can get the Pinterest Button Using these codes
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
For custom button
The data-pin-custom="true" attribute is important because it keeps your custom markup, including your HTML and CSS.
<a href="https://www.pinterest.com/pin/create/button/"
data-pin-do="buttonBookmark"
data-pin-custom="true">
--YOUR CUSTOM HTML--
</a>
--YOUR CUSTOM HTML-- Given likes as below
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
<p>Ordinary button</p>
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<p>Custom button</p>
<a data-pin-do="buttonPin" href="" data-pin-custom="true">
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
</a>
For more information: Visit https://developers.pinterest.com/docs/widgets/save/?
Hey everyone I know this question has been asked timelessly but I am a complete newbie to HTML, CSS and Javascript. I literally am on my fourth day of self learning how to code so please forgive me.
I want to test a page where if you click on a button it will display a picture, if you click on the other button it will display a different picture. Here is what I got so far, what would be by next steps and why? Thank you!
<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg" style="display:none;>
<img id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button> Woof! </button>
<button> Meow! </button>
<script>
</body>
</html>
There are many ways to achieve this. The solution below uses onclick combined with data-* to reference which image a button should show or hide. Further, visibility requires the CSS class "visible" to be shown (try to avoid styling directly on the style attribute).
When an image should be shown, the existing visible image should be invisible. You could either store which one is shown, and only remove the class from that element - or as I have done, by removing it from all images.
To get the button we clicked, this is passed to the function in onclick=myclick(this). That means that we can access the clicked buttons attributes, specifically the data-href="dog". This is accessed as element.dataset.href.
var dog = document.getElementById("dog");
var cat = document.getElementById("cat");
function myclick(element) {
dog.classList.remove("visible");
cat.classList.remove("visible");
document.getElementById(element.dataset.href).classList.add("visible");
}
.myimage {
display: none;
}
.visible {
display: block;
}
<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img class="myimage" id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg">
<img class="myimage visible" id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button onclick="myclick(this)" data-href="dog"> Woof! </button>
<button onclick="myclick(this)" data-href="cat"> Meow! </button>
</body>
</html>
I don't find any clue to do that from the Semantic UI documentation/API, is there a clean way to do that?
For now, what I see is to play with :
$('.ui.accordion > .title').addClass('active')
$('.ui.accordion > .content').css('display', 'block')
You actually can do this like so:
$('.ui.accordion .individual').each(function(i){
$(this).parent().accordion('open',i);
});
You just iterate through each individual element to get its index position, then ask the parent (the accordion) to open each one. This way you still get the transition.
Here is the answer:
onOpen(commentID: string){
jQuery(`.replies${commentID}`).accordion('open', 0);
}
<div class="ui accordion replies{{commentID}}">
<div class="title" (click)="onClick(commentID);">
</div>
<div class="content">
hello
</div>
</div>
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
I'm working on a Joomla 2.5 based website.
i have a submenu with a title (the title is the name of the topmenu category) on top. This title has a background color. Now I want to have a different background color (of the title) on every page that I open.
I thought about creating a extra menu module for every menu item with a specific color defined in the css, but than I have to rename every module because I must not have the same name twice. But I need the title to be the same as the Topmenu category for all the submenu items.
here is the basic structure of the generated code:
<body>
<div id="content">
<div id="breadcrumbs"></div>
<div id="main" class="centerAndRight"></div>
<div id="right">
<div class="moduletable_servicemenu">
<h3>HERE IS THE TITLE</h3>
<ul class="menu"></ul>
</div>
<div class="moduletable_kontaktmodul"></div>
</div>
</div>
<!-- end content -->
<div id="overallfooter"></div>
</body>
Could anybody help me with an idea, please.
Thanx in advance.
If you place a class on that title (e.g. class="title"), and then place a different class on the body tag of each page (e.g. <body class="contact">) you can easily style the title differently on each page, such as:
.contact .title {background: red}
.about .title {background: blue}
I wrote this script for random images, it can be edited to apply towards your desire which is random colors. Its fairly simple and again you can do as many colors as you want, and the program will randomize them.
$(document).ready(function() {
var colors = ['#ccc', '#dedede', '#333', '#555' /***keep adding as many colors***/];
$(".Topcategory").each(function(){
$(this).css({'background' : ' + colors[Math.floor(Math.random() * colors.length)] + ')'})
});
});