I have the follwing code :
<div class="container" ng-controller="ListCtrl">
<div class="col-md-2-4" ng-class="{'div-hide': index > $index + 1}" ng-repeat="question in questions">
<div>{{question.qid}} {{question.question}} </div>
<div class="row">
<div class="col-lg-3 col-md-4 col-s-6 thumb" ng-repeat="image in question.images">
<div ng-mouseover="style={'background-color':'gray','cursor':'pointer'}">
<img class="img-responsive " id="{{image.imageid}} " src="{{image.imgpath}} " alt=" " >
</div>
</div>
</div>
</div>
<div class="keys">
<button type="button " class="btn btn-next " ng-click="index=index < questions.length ? index + 1 : questions.length ">Next</button>
<button type="button " class="btn btn-pre " ng-click="index=index> 1 ? index - 1 : 1">Previous</button>
{{index}}
</div>
</div>
In the img tag i have added a mouse over so that when the mouse goes over the image it will give gray background etc. however its not working. Does anyone know why?
UPDATEE
so ive edited it and tried adding css to the div but that does not seem to work either.. heres the updated plunker ..http://plnkr.co/edit/DqNRnc8xYZn73vdkWjaG?p=preview Please someone helpp!
Add this to your CSS:
#imgbutton:hover, #imgbutton:active {
background-color: gray;
}
This uses CSS to define a hover style.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying to add this to a div in my document but the selection items are all stacking on top of each other even though I'm setting them up in different columns. I think its because I am looping through it and its creating an exact copy of itself and they're stacking on each other. CSS wont fix it either. I've tried wrapping the col-md-3 class outside of the div thats outputting the javascript no luck. I'm really stuck. When I've used React its been easy to do stuff like this with JSX, but I'm having trouble here. Also I should mention that the classes aren't linked to any css. I just named them but they don't do anything. All the styles are inline and can be seen in the jquery.
for (var i = 0; i < works.length; i++) {
$('#work-items').append("\
<div class='col-md-3'>\
<div class='portfolio-item'>\
<span class='work-name'" + works[i].name + " ></span>\
<a href='" + works[i].link + "' class='work-img weblink' style='text-decoration: none; font-size: 1.2em; color:salmon'>\
<img class='img-responsive img-thumbnail' style='height: 150px; width: 300px' src='" + works[i].pic + "'>\
<span class='info'><p class='proj-title'></p>" + works[i].title + " </span > \
</a >\
<a href='" + works[i].github + "' class='work-img github' style = 'text-decoration: none; color: DodgerBlue; font-size: 1.2em' > \
</a >\
</div >\
</div >\
");
}
I doubt this is needed but heres the array of objects I'm getting the data from.
var works = [
{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
},
]
Link to HTML/CSS Output
Here is the rendered HTML
<html lang="en">
<body>
<div class="container">
<h1 class="name">jJonathan</h1>
<h4 class="title">...</h4>
</div>
<div class="container">
<div id="work-items" class="row">
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/BikesberlinCollage.jpg"> <span class="info"><p class="proj-title"></p>Ecommerce Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" vue=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/projekt.png"> <span class="info"><p class="proj-title"></p>Project Manager</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/recipeapp.png"> <span class="info"><p class="proj-title"></p>Recipe Sharing App</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/jobs.png"> <span class="info"><p class="proj-title"></p>Job Board Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/weather.png"> <span class="info"><p class="proj-title"></p>Weather Checker</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" react="" |="" firebase="" redux=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/planner.png"> <span class="info"><p class="proj-title"></p>Planner</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/form.png"> <span class="info"><p class="proj-title"></p>Javascript Form</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/reactchat.png"> <span class="info"><p class="proj-title"></p>React Chat App</span> Github </div>
</div>
</div>
</div>
<script src="js/work.js"></script>
<script src="js/script.js"></script>
Assuming you are using bootstrap I have to ask if the #work-items has a class of "row".
Besides that, one wonders if the css for any of the non-bootstrap elements you are adding, here, is getting in the way.
If you replace all of the html inside col-md-3 with simple works[i].link does the wrong behavior still occur?
Can you check on padding and margin provided to the CSS classes portfolio-item and work-items also can you try once with col-lg-3 class, I doubt your screen resolution may be leading to the view optimized for mobile where divs are stacked oon top of each other, although in the snapshot the screen size doesn't appear to be an issue.
Spent hours trying to figure this out. Thanks alot for the help. I had an extra character in my bootstrap CDN link. Sorry for wasting everyone's time -_-.
Besides the code you provided works as expected in a minimal environment (which means you should inspect your .col- elements and see which rule messes the position property), here's how you can create and apply a template over an array of items:
How to append data to DOM using a loop or .map()
var works = [{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
}
];
const template_item = ({name,title,pic,link,github}) => `
<div class="col-md-3">
<div class="portfolio-item">
<h4 class="work-name">${name}</h4>
<a href="${link}" class="work-img weblink">
<img class="work-thumb img-responsive img-thumbnail" src="${pic}" alt="${title}">
</a>
<p>
${title}
GitHub: ${github.substring(github.lastIndexOf("/")+1)}
</p>
</div>
</div>`;
const items = works.map(template_item);
$('#work-items').append(items);
.work-img {
text-decoration: none;
}
.work-thumb.img-thumbnail {
height: 150px;
width: 300px;
}
.work-link,
.work-github {
font-size: 1.2em;
color: salmon;
}
.work-github {
color: dodgerblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div id="work-items" class="row"></div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PS:
Loop only to create/concatenate strings or prepopulate an array with your items Elements
Append only once! (not multiple times inside a loop)
Don't wrap <p> inside <span>
Do use alt tags
I ask a question about my function Javascript.
I recover a data list after an a ajax call.
In the list i have a field with a picture and i want show this in a modal bootstrap.
In my code the picture is displayed below the column.
Thanks in advance guys :)
$.when(promiseListeRubriqueDocument).then(function(result) {
var data = JSON.parse(result);
$(".listRubrique").html("");
$.each(data, function(index, item) {
console.log(item);
var rubTemplate = $(".template");
var modal = (".img");
var rub = $(rubTemplate).clone().removeClass("template").removeClass("hide");
$(rub).find(".labelRubrique").text(item.codeRubrique);
$(rub).find(".inputRubrique").val(item.libelleRubrique);
$(rub).find("div.rubrique-image").attr("data-rubrique-id", item.idRub);
$(rub).find("div.rubrique-image[data-rubrique-id=" + item.idRub + "]").click(function(i, element) {
if (item.imageRubrique) {
if ($("" + "[data-rubrique-id=" + item.idRub + "]").find('img.rubrique-exemple').length < 1) {
$("" + "[data-rubrique-id=" + item.idRub + "]").append("<div><img class='rubrique-exemple' src=" + item.imageRubrique + " width='100px' /></div>");
}
}
});
$(".listRubrique").append(rub);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="list-group-item template hide">
<label class="labelRubrique" style="font-weight:bold"></label>
<div class="row rubrique-image" data-rubrique-id="">
<div class="col-md-8">
<input name="enteteRubrique" id="enteteRubrique" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
</div>
<div class="col-md-3">
<a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
</div>
</div>
</li>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<liferay-ui: messagekey="admin.gestion.documents.rubriques.disponibles" />
</div>
<div class="panel-body">
<ul class="list-group listRubrique">
</ul>
</div>
</div>
</div>
</div>
"Lightbox" is the common name for what you've described. Since you mentioned a modal bootstrap, something like http://jbutz.github.io/bootstrap-lightbox/ is likely to be aligned with your goals.
simply clone your "field" div, give it id then append to a bootstrap modal body. Or to avoid appending new clone everytime: use .html() instead.
from https://www.w3schools.com/bootstrap/bootstrap_modal.asp with modification, using bootstrap 3.3.7, jquery 3.3.1
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id='myColumn'>
<img src="https://via.placeholder.com/350x150"/>
<p>Some text in the modal.</p>
</div>
</div>
<script>
$(document).ready(function(){
// var field = $("" + "[data-rubrique-id=" + item.idRub + "]").clone();
var fieldtest= $('#myColumn').clone();
var modal = $("<div id='myModal' class='modal'>\
<div class='modal-dialog'>\
<div class='modal-content'>\
<div id='myBody' class='modal-body'>\
</div>\
</div>\
</div>\
</div>").appendTo('body');
// $('#myBody').html(field);
$('#myBody').html(fieldtest);
});
</script>
</body>
`
I have a set of "div" whose children count I want to check when a user fadeOut images under that div block, if the all childrens have be closed out i want to call the function: kind of like:
edited: the current code always alerts YES whenever the div is faded,
how do i destroy the DOM entirely without having to use :visible
filter. getting rid of the entire card class after fading out
considering the HTML:
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100' />
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'> <span class='fa fa-plus-circle fa-fw'> </span>Join </button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
</div>
and the jquery below:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.card').closest('scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.length < 1) alert('yes');
});
});
when the <span class = 'close-x'> × </span> is clicked the
entire <div class='card'> is fadedOut, then on fadeout, if no more
cards exist or the last cards have been faded, then alert('yes');
Assuming that multiple .card elements are nested in the same parent, you can check if all the siblings have faded out.
In your original markup, you have an unclosed </div>, which causes the .card elements not to be siblings of each other, I believe this is a typo on your part, since it is the most parsimonious explanation.
Since .fadeOut() hides the element, you can simply check if the filtered set of :visible returns a length of 1 or more:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
Here is a proof-of-concept example:
$(function() {
$('.close').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
// Get wrapping ancestor
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
// Filter out those that are not visible, and check for remaining visible cards
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
});
/* Just styles for a dummy call-to-action element in .card */
span.close {
cursor: pointer;
color: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrolling-wrapper">
<div class="card">Card 1. <span class="close">Click to hide me.</span></div>
<div class="card">Card 2. <span class="close">Click to hide me.</span></div>
<div class="card">Card 3. <span class="close">Click to hide me.</span></div>
<div class="card">Card 4. <span class="close">Click to hide me.</span></div>
<div class="card">Card 5. <span class="close">Click to hide me.</span></div>
</div>
In your callback you may simply test if at least a card is visible:
if ($(this).closest('.card').siblings('.card:visible').length < 1) alert('yes');
$('.img-wrap .close-x').on('click', function () {
var card = $(this).closest('.card');
card.fadeOut('slow', function () {
if ($(this).closest('.card').siblings('.card:visible').length < 1) console.log('yes');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
</div>
I've got a movie reviews example application built in angular + bootstrap, I'm trying to build a "grid" of 3 images for medium and up screens, the problem is that when I want to have only 2 images per row for xs screens.
I'm using ng-repeat and populating the imgs inside the cols.
is there a nice way to do this? (I'm aware that the $index + N may be out of bounds, and that there is code duplication here. just want to find a good solution for rearranging the bootstrap grid for different screen sizes on dynamic data)
<div ng-repeat="movie in movies" ng-if="$index % 3 == 0" class="row slide-left">
<div class="col-md-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
</div>
</div>
<div ng-repeat="movie in movies" >
<div class="col-md-4 col-xs-6">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movie.poster_path}}' ng-click="chooseMovie(movie)">
</div>
</div>
This should do the trick.
I removed the row but i think even with it will works unless you use the clearfix class.
The grid will automatically go on the next line after "12" columns.
So a size of 4 for medium screen means 3 per line, 6 for xs screen ->2/line :)
You can detect bootstrap columns by using the following function:
function findBootstrapEnvironment() {
var envs = ["ExtraSmall", "Small", "Medium", "Large"];
var envValues = ["xs", "sm", "md", "lg"];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envValues.length - 1; i >= 0; i--) {
var envVal = envValues[i];
$el.addClass('hidden-'+envVal);
if ($el.is(':hidden')) {
$el.remove();
return envs[i]
}
};
}
The setting a value to the scope based on the return
if(findBootstrapEnvironment()==="Medium"|(findBootstrapEnvironment()==="Large"|){
$scope.size="Medium"
}else{
$scope.size="Small"
}
And then with ng-if you can manage the div to be with 3 or 2 photos like this
Three photos if medium
<div ng-repeat="movie in movies" ng-if="size==medium" class="row slide-left">
<div class="col-md-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
</div>
</div>
Two photos if small
<div ng-repeat="movie in movies" ng-if="size==small" class="row slide-left">
<div class="col-sm-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-sm-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
</div>
<tr id="mytr">
<td id="Table" onmouseover="this.className='menulevel1hl';" onmouseout="this.className='menulevel1norm'" class="menulevel1norm" onclick="PopupWin('Left',divMenu2011,this,'.menuitempopuprownormal','.menuitempopuprowhighlight','','.menuitempopupscroll' Alerts  </td>
<div id=" divMenu2011 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/exception.search' ; "> Alert Search</DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2012,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> Inventory </td>
<div id="divMenu2012 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/inventoryaudit.search' ; "> Inventory Audits</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/inventory.detail?CurrentDetailViewID=YIMD080' ; "> Adjust Inventory</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/itemsupsearch.search' ; "> Item Suppression Console</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/additemsuppression.detail?CurrentDetailViewID=TGTOMSSCFD008' ; "> Add Item Suppression</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItem.detail?CurrentDetailViewID=TGTPID001' ; "> Add Protected Qty</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItem.search' ; "> Protected Qty Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItemAudit.search' ; "> Protected Qty Audit Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/MCAFeeds.detail?CurrentDetailViewID=A001' ; "> Upload MCA Store Feed </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/MCAFeeds.detail?CurrentDetailViewID=A002' ; "> Upload MCA Item Feed </DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2013,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> RTAM Exclusion </td>
<div id="divMenu201404150720371518959 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D002' ; "> RTAM Exclusion </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=001' ; "> Start RTAM Exclusion </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D004' ; "> Remove Excluded Items </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D003' ; "> Enter Exclusion Removal </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D009' ; "> Schedule RTAMExclusion </DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2014,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> Sales Order </td>
<div id="divMenu2014 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/order.search' ; "> Sales Order Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/shipment.search' ; "> Outbound Shipment Console</DIV>
</div>
I am trying to click on Ship Order Console. Please find the code below
WebElement ele1 = driver.findElement(By.xpath("//tr[#id='mytr']/td[4]"));
ele1.click();
WebElement ele = driver.findElement(By.xpath("//div[#id='divMenu2014']/div[1]"));
String js = "arguments[0].style.height='auto'; arguments[0].style.visibility='visible';";
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript(js, ele);
System.out.println("element is " + ele.getText());
ele.click();
When I am printing the ele.gettext(), I am getting "sales order console", but when I am trying to click on it it is moving to inventory tab.
Could any one point out where it is going wrong?
Check this link to set attribute to web element,
How to use javascript to set attribute of selected web element using selenium Webdriver using java?
Alternatively, you can click using Javascript without making it visible. I have used CSS selector for your element.
executor.executeScript("$(\"div#divMenu2014>div\").click();");