For some reason I can't get my code to work
var mainImg = $("#LayoutDiv1").children("img").attr("src").replace("myFull", "mytinythumbs");
It draws from this and it isn't a problem with the setup as other functions work just fine, for some reason it doesn't replace myFull instead it just leaves it there.
<div id="LayoutDiv1">
<i class="fa fa-angle-left"></i>
<i class="fa fa-angle-right"></i>
<img id="pusher" class="resize" src="../images/myFull/Young_Diego.jpg" alt="page1">
</div>
EDIT:::::::::::::::::::::::
The code suddenly decided to work...not sure what the error was before
try this
var mainImg = $("#LayoutDiv1").children("img").attr("src").replace("myFull", "mytinythumbs");
add this at below
$("#LayoutDiv1").children("img").attr("src",mainImg);
Related
Hi I am building a small slideshow of icons and also want to have data inside the icons like its speed and color. I've loaded jQuery from the top of my page.
<body>
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active"></i>
<i class="fa fa-bicycle" id="not-active"></i>
<i class="fa fa-plane" id="not-active"></i>
<i class="fa fa-ship" id="not-active"></i>
<i class="fa fa-fighter-jet" id="not-active"></i>
<i class="fa fa-space-shuttle" id="not-active"></i>
</div>
<div class="arrow-buttons">
</div>
</div>
</div>
</body>
Here is the jquery to press the right arrow button to change slide across the icons but it doesnt seem to be working?
$(document).ready(function(){
$('.right-arrow').on('click', function(){
let currentImg = $('#active');
let nextImg = currentImg.next();
if(currentImg.length){
currentImg.removeAttr('#active').css('z-inex', -10)
nextImg.attr('#active').css('z-index', 10);
}
});
});
First of all, I recommend using class instead of id. Even if you are going to use id, it is not recommended to use this way. The id value must be uniq. In your case, your ID's are not uniq. And also this is better to use like this ID selector.
id="notActive"
You can just try with each function to get current div. I tried with your code but did not work, with each yes.
$('.fa').each(function(){
if( $(this).hasClass('active') ){
currentImg = $(this);
}
})
And bonus : You can also use current div index value, then you dont have to use prev, next. You can increase or decrease index the value one by one. Just a suggestion.
You are using the id attribute incorrectly, as every id must be unique.
Also, setting the z-index on elements has no effect.
Finally, jQuery is not helping and can be eliminated.
Here's a more standard way to make something active/inactive, using a class named `active':
// control buttons
const right = document.querySelector('.right-arrow');
// handle right click
right.onclick = function() {
const activeImg = document.querySelector('i.active');
const nextImg = activeImg.nextElementSibling;
if (activeImg && nextImg) {
activeImg.classList.remove('active');
nextImg.classList.add('active');
}
};
i {
font-size: 32px;
z-index: -10; /* this has no effect */
}
.active {
z-index: 10;
background-color: yellow;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
right-arrow
</div>
</div>
</div>
I am trying to remove the $movieDiv that is appended when clicking "#buttonLicensedMovie". It appends to the html just fine and the same button hides just fine, as it should. The issue I am having is when I click the anchor tag with id "licensedMovie1, the $movieDiv does not remove and the "#buttonLicensedMovie1" does not show back up. What am I doing wrong? Any help would be appreciated. Thanks!
JQuery:
$(function() {
$("#buttonLicensedMovie1").click(function(){
var $movieDiv = '<p class="header">Becoming An Agent</p>\n<iframe width="500" height="281" src="https://www.youtube.com" frameborder="0" allowfullscreen></iframe>\r\n<br/><a id="licensedMovie1" class="video-close"><i class="fa fa-times" aria-hidden="true"></i> Close Video</a>';
$("#movieLicensedWrapper1").append($movieDiv);
$("#buttonLicensedMovie1").hide();
});
});
$(function() {
$("#licensedMovie1").click(function(){
var $movieDiv = '<p class="header">Becoming An Agent</p>\n<iframe width="500" height="281" src="https://www.youtube.com/" frameborder="0" allowfullscreen></iframe>\r\n<br/><a id="licensedMovie1" class="video-close"><i class="fa fa-times" aria-hidden="true"></i> Close Video</a>';
$("#movieLicensedWrapper1").remove($movieDiv);
$("#buttonLicensedMovie1").show();
});
});
HTML:
<div class="col-xs-12">
<button id="buttonLicensedMovie1" type="button" class="btn btn-default"><h5>Becoming an Agent <i class="fa fa-caret-square-o-right fa-lg" aria-hidden="true"></i></h5></button>
<div class="col-xs-12" id="movieLicensedWrapper1">
</div>
</div>
You could use (won't work in your case because not everything is inside the p):
$("#movieLicensedWrapper1 p.header").remove();
Or you create a global variable and assign the value with:
$movieDiv = $.parseHTML('...');
And then you can remove with just:
$movieDiv.remove();
When you append it works fine because you are just adding html. However, when you want to remove you need to select the DOM element. Try this instead:
var $movieDiv = $('#movieLicensedWrapper1').find('.header');
$movieDiv.remove();
jQuery on click function to tweet current quote doesn't want to work. What is wrong here. I have to build random quote machine and tweet current quote. I've managed to do JSON API but cannot figure out how to tweet current quote. Please help.
HTML:
<div class="container-fluid">
<div class = "well">
<div class="row">
<h2 class="text text-center"><i class="fa fa-quote-left"> </i> Hey, what when and why there is no and yes?</h2>
<p class="author">-Alina Khachatrian</p>
<div class="buttons">
<div class="row">
<div class="col-xs-6">
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
</a>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-transparent" id ="getNewQuote" title="Get a new quote">New Quote</button>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by Edgar Kiljak.</p>
</footer>
</div>
</div>
JS:
$(document).ready(function(){
$(".btn").on("click", function(){
$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function (json) {
var html = "";
var len = json.length;
var index = Math.floor(Math.random() * len);
var val = json[index];
html += "<div class = 'newQuote'>";
html += "<h3>'" + val.quote + "'</h3>";
html += "</div>";
$(".author").text(val.author);
$(".text").html(html);
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
$(val.quote).text() +"&via=your-app-name&original_referer=your-url");
});
});
});
});
First problem I had was that I couldn't even see the link to Tweet Current Quote. I had to add the text in the anchor:
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
TWEET CURRENT QUOTE
</a>
Second: it was popping up the new Twitter window, but not filling the text. In your onclick code, the $(val.quote).text() was unnecessary - just use val.quote
Third: you'll see that in addition to opening the new Twitter window, it is opening another occurrence of your own page. This has to do with how you have the tweet-quote anchor defined in your html, but the easiest way to stop it is to add return false in your onclick so that the target in the anchor doesn't fire:
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
val.quote +"&via=your-app-name&original_referer=your-url");return false;
});
Fourth: if you load a second 'New Quote', and then click the 'Tweet This Quote', you'll see that it opens two new windows -- it is tweeting both the old and the new quotes. This is because the on("click") is cumulative. You should clear out any existing function before setting the new one:
$('#tweet-quote').unbind("click");
$('#tweet-quote').on("click",function(){
window.open ...
Fifth: Usually when you post a question here, "doesn't work" is not a sufficient explanation. You should explain what's not working, or what is working differently than you want it to. Error messages if there are any. What you saw in the console logs. Some people get real sticky about that. And some people will probably get sticky about me doing your homework for you. Good luck though!
I am trying to test below code:
<div name="userElem" *ngFor="let user of users ; let i=index">
<div class="list-group-item" id="user-{{i}}" (click)='selectUser(user)' [style.backgroundColor]="user?._id==selectedUser?._id ? '#F0F0EE' : 'white'">
<div *ngIf="user?._id==selectedUser?._id">
<div class="pull-right">
<a id="delete-user-{{i}}" (click)="deleteUser(user._id)">
<i class="fa fa-trash fa-fw"></i>
</a>
<a (click)="editUser(user._id)">
<i class="fa fa-pencil fa-fw"></i>
</a>
<a [routerLink]="['/edit',user._id]" name="userLink-{{i}}">
<i class="fa fa-eye fa-fw"></i>
</a>
</div>
</div>
</div>
</div>
By Using Below E2E Test Case:
it('should delete a user', () => {
page.navigateToUserComponent();
let selectUserElem = element(by.id('user-0')).click(); //this event is fired as I can see user getting selected.
let deleteUserElem = element(by.id('delete-user-0'));
browser.wait(function() {
return browser.isElementPresent(by.id('delete-user-0'));
}, 5000);
expect(deleteUserElem.isPresent()).toBeTruthy(); // if element is present I want to click that element .i.e. delete the first user in array
});
But So Far Not Getting Any Success.
I tried Multiple Approaches as discussed in this link:
StackOverflow Post
But Couldn't make it work.
any help?
Thanks
If you want to identify first delete_user element you can use following xpath.
let deleteUserElem = element.all(by.xpath(".//a[contains(#id, 'delete-user-')]")).first();
then you can cobine it with the protractor expected condition to wait till the desired web element is present.
EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(deleteUserElem),20000, 'element is not visible within the time specified');
Use ExpectedConditions along with browser.wait() to make your script wait for certain condition:
var EC = protractor.ExpectedConditions;
var elm = element(by.id('delete-user-0'));
browser.wait(EC.presenceOf(elm), 5000);
Are you using socket.io? There seems to be bug where protractor does not work if you are using socket.io in your app: https://github.com/angular/angular/issues/11853 .
This is my code.
var warning = '<div class="ui inline cookie nag style="display: block;"><span class="title">Tava ekrāna rezolūcija ir pārāk maza, lai skatītu šo lapu. Lūdzu, palielini rezolūciju vai attālini lapu!</span><i class="fa fa-times fa-fw" style="color: #eee; float:right"></i></div>';
document.getElementById("resWarn").innerHTML = warning;
Nothing is showing up, when putting script into html page.
Script is included UNDER <span id="resWarn"></span>. When I set variable warning to anything like sdnhasjkshushduig, it show up.
Please help.
You are missing a quote after -> "nag"
class="ui inline cookie nag"
I think you just have to put quotation marks before the keyword style.
Like this:
var warning = '<div class="ui inline cookie nag" style="display: block;"><span class="title">Tava ekrāna rezolūcija ir pārāk maza, lai skatītu šo lapu. Lūdzu, palielini rezolūciju vai attālini lapu!</span><i class="fa fa-times fa-fw" style="color: #eee; float:right"></i></div>';