On the following site:
Link to site with issues
I have three buttons at the bottom of each thumbnail (hover to see them). The three buttons open up a prettyphoto box that uses the title attribute under the image (hidden as white currently next to the gallery nav buttons).
I need the HMTL title attribute to remain within the HTML. I just do not need the ugly tooltip when you hover over the buttons.
Does anyone know how to remove hover title tooltip on links?
I think you are after a workaround like this:
First put a class suppress on every link you want its tool-tip to be removed on hover:
<a class="suppress" title="">link text</a>
Then you may have this snippet in your code:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].className == 'suppress') {
links[i]._title = links[i].title;
links[i].onmouseover = function() {
this.title = '';
}
links[i].onmouseout = function() {
this.title = this._title;
}
}
}
Related
Im trying to do; show divs when click on check-box radio button. I made it with jquery but when you load page all my divs are visible. You have to click my first check-box radio button to make other divs invisible. or just click other check-box radio buttons.
I tried
#row2 {
display:none;
}
But when I added this to css, if you click first check-box radio button(which is related to div row2) div is not visible and and it is not working.
Any other solution for when you open page I just want to see only div (row2) which is checked. I dont want to see other divs when page load.
Thanks...
Demo Link: https://rexin-demo.netlify.app/main.html
Ps: Pics and button are not visible on jsfiddled cuz of assets. Better to look it via demo link.
https://jsfiddle.net/t4e13xvj/
Trigger the click by adding .filter(':checked').click() at the end of the input's click event .. Try it
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).val(); // use .val() instead of .attr('value')
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}).filter(':checked').click();
});
Also I prefer to use change instead of click for radio and checkbox inputs
$(document).ready(function(){
$('input[type="radio"]').on('change' ,function(){
if(this.checked){
var inputValue = $(this).val();
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}
}).filter(':checked').prop('checked' , true).change();
});
OR With only css you can use
.box:not(.product){
display : none;
}
So I'm trying to make a website using Angular and have come across a very peculiar bug.
Basically I have an *ngFor div that creates 12 buttons.
<div *ngFor = "let color of colors; let i = index" style = "display: inline;">
<button (click) = "toggleTrue(i)" id = "{{i}}" class = "coloredButton">
</button>
</div>
When a button is clicked then it should highlight the button and then change a value in an array within my component like so.
toggleTrue(id: number){
this.colors[id] = !this.colors[id];
var button = document.getElementById(id.toString());
if(this.colors[id] === true){
button.style.border = "10px";
button.style.borderColor = "white";
button.style.borderStyle = "solid";
}
else{
button.style.borderStyle = "none";
}
}
However for some reason whenever I click a button it highlights the button next to it and if I click it twice more than it will highlight a button two buttons away for some reason, click it twice more and it'll highlight a button three buttons away, etc. It's not highlighting the right button, but the id it passes through to the function is correct, I checked using console.log(id).
I've messed around a bit (taking out classes and lines and whatnot) and I've isolated the problem to this line.
this.colors[id] = !this.colors[id];
If I remove this then everything works fine (except of course I can't edit the value of the array anymore). This is proven further when I remove the click function of my buttons and the default highlight for buttons correctly highlights the right button.
Can anyone please help me out and tell me why it's not highlighting correctly? Any help would be appreciated.
If you're curious I created the array earlier within the component using colors = [] and it's an array of booleans that I filled within the constructor using a basic for loop.
https://codesandbox.io/s/crimson-brook-wn3q0?file=/src/app/app.component.html
Here is a sandbox with a solution.
Essentially you want to keep styling in the template through the use of NgClass or NgStyle
and use the component just for changing state, avoid accessing the DOM directly due to lifecycle problems.
Typescript
export class AppComponent {
colors: boolean[];
constructor() {
this.colors = [];
for (let i = 0; i < 10; i++) {
this.colors.push(false);
}
}
toggleTrue(id: number) {
this.colors[id] = !this.colors[id];
}
}
HTML
<div>
<div *ngFor="let color of colors; index as i">
<button
(click)="toggleTrue($event, i)"
id="{{i}}"
[ngClass]="{'active':colors[i]==true}"
>
button
</button>
</div>
</div>
CSS
.active {
color: red;
}
.inactive {
color: blue;
}
You could do some changes in your code. Firs in your HTML:
<button *ngFor="let color of colors; let i = index" (click) = "toggleTrue(i)" class = "coloredButton" [class.active]="color"> {{i}} < /button>
You noticed about [class.active]="color" this sentence verify if color is true the button will have the active class
.active {
border: 10px solid white;
}
I don't know how you generate colors array but I assumed somethings and also change your function in the class component
colors = new Array(10).fill(false);
toggleTrue(index: number) {
this.colors[index] = !this.colors[index]
}
I have unordered list of links. Using JQuery, when clicked, the link's contents (a div with image and text) are loaded into the section specified. This all works beautifully. But I'm wondering how to also get the onclick function to move the view to the div's location on the page similarly to how anchor tag works. Here is the site where you can see the div being populated, but not moving down to view it. https://www.thecompassconcerts.com/artists.php
My JQuery knowledge is not awesome (I'm being generous).
I followed Osama's suggestion to add event listener and I got almost correct results. Upon first click...contents are loaded but do not move. But on every successive click, it functions perfectly: Contents loaded and move to div (like an anchor link) works! BUT...not on Safari or Mobile Safari.
Here is my jQuery. I assume if first click is not working that I must add listener before the first click?? Can the event listeners be added on page load BEFORE the function to prevent default click, etc.?
<script>
// BEGIN FUNCTION TO CAPTURE AND INSERT CONTENT
$(document).ready(function () {
// PREVENT DEFAULT LINK ACTION
$('.bio').click(function (e) {
e.preventDefault();
// ADD LISTENER TO EACH ITEM BY CLASS
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
// FUNCTION TO MOVE TO LOCATION
function moveToDiv() {
document.location = "#performbio";
}
// STORE the page contents
var link = $(this).attr("href");
// load the contents into #performbio div
$('#performbio').load(link);
});
});
</script>
Here is the HTML with links in unordered list
<!-- CONTRIBUTING ARTISTS LIST AND BIOS -->
<section id="artists">
<h2>Contributing Artists</h2>
<ul class="cols">
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
</ul>
</section>
Here is HTML of Section where code is being inserted by function
<!-- Performer Bios Dynamically updated -->
<section id="performbio">
</section>
Here is div contents that are being inserted
<div class="artistbio">
<p class="artistname">First Last</p>
<img class="artistimg" src="performers/img/name.jpg">
<p>lots of text here</p>
</div>
If I understand it right, you want to scroll to the section where the details appear on clicking any item in the list but through js and not HTML. In that case, you would add an onclick listener on to the list elements like so:
listElement.onclick = moveToDiv;
The function:
function moveToDiv() {
document.location = "#performbio";
}
A simple way to add a listener to all of the elements:
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
For the edited post, you need to move the function definition out of the document.ready function. you would change the script to:
// FUNCTION TO MOVE TO LOCATION
function moveToDiv() {
document.location = "#performbio";
}
$(document).ready(function () {
// PREVENT DEFAULT LINK ACTION
$('.bio').click(function (e) {
e.preventDefault();
// ADD LISTENER TO EACH ITEM BY CLASS
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
// STORE the page contents
var link = $(this).attr("href");
// load the contents into #performbio div
$('#performbio').load(link);
});
});
Another Solution: Using scrollIntoView
First, get all the elements into a variable using querySelectorAll
var elements = document.querySelectorAll(".bio");
Then create a function, for the scrolling part:
function scroll(element) {
element.scrollIntoView();
}
Then just add the onclick listener:
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
scroll(elements[i]);
});
}
I found it very frustrating to try to accomplish these two tasks so instead of a jQuery solution I opted for a CSS solution.
I populated my DIV with all the php includes, gave them unique id's for the anchors to work and then used CSS to hide them by default until clicked and it works like a charm....shows only what I need to show and goes there like an anchor is supposed to.
I must thank Ghost for all of your help and efforts to try and solve this via jQuery. You were very kind and generous.
Here is the code I used:
My collection of links.
<li><a class="bio" href="#artist-name1">Name 1</a></li>
<li><a class="bio" href="#artist-name2">Name 2</a></li>
which anchors to these divs
<div class="bio-container" id="artist-name1">
<?php include('performers/name-lastname.html'); ?>
</div>
<div class="bio-container" id="artist-name2">
<?php include('performers/name-lastname.html'); ?>
</div>
Then I use this CSS to hide those divs until the anchors are clicked.
I'm using [id*="artist-"] to target only links with such text...very easy. Not ideal for a massive list...but mine is not so large so it will do for this situation.
[id*="artist-"] {display: none;}
[id*="artist-"]:target {display: block;}
I just tried putting text over my video. The video autostarts when hovering it. With the Text on it the hover is "disabled". Is there any option to display the text without effecting the hover? Text is absolute.
I use a js to start the video. The Text is in a div on top.
window.onload = function() { //executes this code after the DOM loads
//--- this is the selector element. Feel free to change this if you don't want all video objects targeted.
const vids = document.getElementsByTagName(`video`)
//--- Now we loop over all of the selected elements and add event listeners
for (let i = 0; i < vids.length; i++) {
vids[i].addEventListener( `mouseover`, function(e) {
vids[i].play()
})
vids[i].addEventListener( `mouseout`, function(e) {
vids[i].pause()
})
}
}
Image from Webinspector
So you can add the two following css properties to the text object so that the user cannot interact with them.
.text-class {
user-select: none;
pointer-events: none;
}
If you still want the users to be able to select the text, say if copy & pasting the text is important you can just do.
.text-class {
pointer-events: none;
}
I've found some Javascript code on the web for toggling between two images when clicking on them as in this example.
Now I wonder how to achieve the same result using divs with the pictures being inside the divs.
Both the small and the large image will each be the background image of a div which is inside another div that forms the border (I need to do this to be able to set the inner border radius of the image, which I can when I use an inner div and set its border radius). So I have:
<div class="bordersmallpicture"><div class="smallpicture"></div></div>
and
<div class="borderlargepicture"><div class="largepicture"></div></div>
How can I tell Javascript to toggle between those two div couples instead of images? Here is the Javascript code that I found for the images:
<script>
var imageURL = "small-picture.png";
if (document.images) {
var smallpicture = new Image();
smallpicture.src = "small-picture.png";
var largepicture = new Image();
largepicture.src = "large-picture.png";
}
function changeImage() {
if (document.images) {
if (imageURL == "large-picture.png") {imageURL = "small-picture.png";}
else {imageURL = "large-picture.png";}
document.myimage.src = imageURL;
}
}
</script>
And the HTML part:
<img src="small-picture.png" name="myimage" title="Click to resize" alt="tree">
Can anyone give me a hint how to edit this code to toggle between the div couples mentioned above? Or will a whole new code be necessary when dealing with divs?
You simply need to toggle the classes. See a running example using your images as CSS background in the classes:
<div id="border-div" class="bordersmallpicture">
<div id="image-div" class="smallpicture"></div>
</div>
The the Javascript becomes:
<script>
function changeImage() {
var currentClass = document.getElementById('border-div').className;
if(currentClass == 'borderlargepicture') {
document.getElementById('border-div').className = 'bordersmallpicture';
document.getElementById('image-div').className = 'smallpicture';
} else {
document.getElementById('border-div').className = 'borderlargepicture';
document.getElementById('image-div').className = 'largepicture';
}
}
</script>
If you expect using javascript a lot, I recommend using jQuery which would make the code easier:
<script>
function changeImage() {
$('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture');
$('#image-div').toggleClass('smallpicture').toggleClass('largepicture');
}
</script>
toggleClass turns ON/OFF a class (Here is the example)