I am working on a project that requires generation of AnythingSlider http://css-tricks.com/examples/AnythingSlider on dynamic basis. I mean values are stored in database and I want to generate multiple sliders at a time, based on the values from the database.
I am able to generate the actual code but despite of every thing being correct, I am unable to make it work correctly. I am a little new to jQuery so, it might just be the problem with calling the event at the incorrect time.
Following is the string generated
<ul id='3'>
<li>
<div class='div_slider_content'>
<table>
<tr><td><img src='PackImages/img1.jpg' width='160px' height='120px'></img></td></tr>
<tr><td><a href='~/PackageDetailsPage.aspx?name=This_is_a_Title&i=3'>Read More</a></td></tr>
</table>
</div>
</li>
</ul>
<ul id='4'>
<li>
<div class='div_slider_content'>
<table>
<tr><td><img src='PackImages/Img2.jpg' width='160px' height='120px'></img></td></tr>
<tr><td><a href='~/PackageDetailsPage.aspx?name=This_is_another_Title&i=4'>Read More</a></td></tr>
</table>
</div>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('#3').anythingSlider({
width: 234,
height: 150,
buildNavigation: false,
enableNavigation: false,
autoplay: false,
startStopped: true,
showMultiple: true
});
$('#4').anythingSlider({
width: 234,
height: 150,
buildNavigation: false,
enableNavigation: false,
autoplay: false,
startStopped: true,
showMultiple: true});
});
});
</script>
All this structure is written in a Literal Control, and is added to the control on the Page Load event. Please help ^^
As I mentioned in the forum post at CSS-Tricks. The code above is showing two sliders with one panel per slider. AnythingSlider is set up to not add navigation arrows nor navigation tabs when only one panel exists. So add additional panels to verify the slider is working.
Related
I hope that you can help with this problem.
I have two pages, page A contains a table of information from a SQL database, page B allows users to create new records. I want to be able to have a button which displays page B modally rather than having to re-direct the user.
Can this be done?
Sure, there are many ways one of which is jQuery UI Dialog.
First, make sure you load jQuery UI in your page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Then, in page A:
<p><input type="button" class="button" value="Modal" /></p>
<script type="text/javascript">
$('.button').click(function () {
var page = "PageB.aspx";
var d = $('<div></div>')
.html('<iframe src="' + page + '"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 350,
width: 250,
title: "Some title"
});
d.dialog("open");
});
</script>
So I am trying to implement a dialog box pop up when the user clicks on a menu button on my page for example About-Button which will display information regarding the web page. So, I have implemented a jquery function and a ascx page for the above.
$(document).ready(function() {
$('#aboutButton').click(function(event) {
alert( "Thanks for visiting!" );//testing
$(function () {
$("#aboutButtonDiv").load('aboutButton.ascx');
$("#aboutButtonDiv").dialog({
backdrop: 'static',
draggable: false,
position: {
my: "center top",
at: "center top+100",
of: window
},
dialogClass: "no-close",
resizable: false,
height: 'auto',
width: 500,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
})
})
})
$(".menu-close").hide();
});
My ascx code is a simple div tag
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="aboutButton.ascx.cs" Inherits="WebProj.aboutButton" %>
<!DOCTYPE html>
<html>
<body>
<div id="aboutButtonDiv" title="About">
<p>Hello this is my first dialog using JQuery</p>
</div>
</body>
When I am clicking the button the click event is firing(I can see the Thanks for visiting message) but the dialog which I want doesn't pop-up. Am I missing something in Jquery code. In my main web page I have the following button
<li class="menutab-list">
<a href="#" type="link" id="aboutButton" data-toggle="modal" data-target="#modalAbout">
<span class="listing-text">About</span>
</a>
</li>
Your code works fine when I tested it. So it probably has something to do with missing jQuery UI files or parts of it.
In order for the Dialog to work you need the jQuery UI library. And even if you have that it could be that it is missing the specific Dialog part.
Go to http://jqueryui.com/download/ and create your download by selecting the options that you need or download the full package. You can check the includes on the third line of jquery-ui.js which parts are included.
And there is a jquery css file as well, with some icon images in the download that are also needed for the dialog to work properly.
Is it possible to add an image to a pop-up message in C#/ASP.Net? I have a standard pop-up coded as such:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Data Entry",
"alert('!!!!!ATTENTION !!!!! \\r\\n This is NOT the production version');", true);
I am being asked to add an image of a stop sign or a large exclamation point or something that stands out and I don't even know if it's possible.
I don't believe it's possible using the JavaScript alert function. However, if you use any CSS based dialog/modal box (ex, Bootstrap Modal, jQuery UI Dialog etc), it should be possible. It'd be silly to list all of the possible tools to do this, but just know they're all pretty similar to what I'm showing below in jQuery UI Dialog.
$(function() {
$( "#dialog" ).dialog({modal: true});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog" title="Test System">
<p>This ain't the production system!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Achtung.svg/2000px-Achtung.svg.png" style="height: 50px; width: 50px" />
</div>
You cannot add html using javascript alert function.
A JavaScript alert is a simple window containing a message.
To implement your need, you must use a library for dialogs, popups etc.
You must use something like jQuery & jQuery UI (par example).
Here is a jsfiddle using jQuery and jQuery UI that do what you want: http://jsfiddle.net/5a833tjv/ (jQuery 1.9.1 and jQuery UI 1.9.2)
So you'll need to add the following html (par example):
<div id="dialog-message" title="Important information">
<span class="ui-icon ui-icon-info" style="float:left; margin:0 0px 0 0;"></span>
<div style="margin-left: 23px;">
!!!!!ATTENTION !!!!! \\r\\n This is NOT the production version
</div>
</div>
And modify your startup script accordingly:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Data Entry",
"
$('#dialog-message').dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
'I've read and understand this': function() {
$(this).dialog('close');
}
}
});
", true);
I am creating a site with C# .net MVC 3 i want to link a menu option which on click should go to specified div...The id of div is "portfolio" which is in index.cshtml and the menu option which has to be linked is in layout.cshtml...
gone through various documentations but didn't found solution...i have tried the native html method but is not working.
<li class="page-scroll">
Inspiration
</li>
just simple dude use this :-
"toggle visibility to use it for different tabs"
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
use this in navigation field:-
portfolio
use this as portfolio div:-
<div id="portfolio" class="section">
//body
</div>
You could use something like this:
$('a').on('click', function () {
$('html, body').animate({
scrollTop: $('#portfolio').offset().top
}, 2000);
});
That will give you a nice scroll effect.
_Layout.cshtml
<ul>
<li class="page-scroll">
Inspiration
</li>
</ul>
Index.cshtml
<div style="height:150px;background-color:Yellow">
//Content for this block goes here
</div>
<div id="portfolio" style="height:50px;">
//Here you want to move
</div>
<div style="height:150px;background-color:Gray">
//Content for this block goes here
</div>
It works on every view if the div block with that id included in each view.
The webpage in question is an SPA, I could describe it as a single large div with several div "boards" inside it, which we scroll into view by applying a webkit transform on the parent div.
Unfortunately, once scrolled too far, the elements returned by WebDriver are "disabled" - the WebElement property "Displayed" is false, the Text property is blank, and I can't execute any clicks/actions on the element. It is however visible on the page at the time and perfectly functional.
While investigating the problem, I created a small test webpage to see under what conditions this occurs.
Link to JSFiddle sample page to show functionality
NB Note that we are not using IFrames in this website, JSFiddle is just to demonstrate functionality.
<html><head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style type="text/css">
.board-nav {
font-size: 12px;
color: #1b1a1a;
margin-right: 10px;
vertical-align: middle;
}
.scroller{
-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms;
-webkit-transform-origin: 0px 0px;
-webkit-transform: translate(0px, 0px) scale(1) translateZ(0px);
transition-property: transform;
transform-origin: 0px 0px 0px;
transform: translate(0px, 0px) scale(1) translateZ(0px);
height: 4000px;
}
</style>
<script type="text/javascript">
var boardPositions = [0, -878, -1748, -2598, -3468];
var $scroller = null;
function changeBoard(event) {
var newValue = 'translate(0px, ' + boardPositions[event.target.id] + 'px) scale(1) translateZ(0px)';
$('.scroller').css('-webkit-transform',newValue);
$('.scroller').css('transform', newValue);
}
$(document).ready( function(){
var $boards = $('.board-nav');
$boards.on('click', changeBoard);
});
</script>
</head><body>
<div>
<div class="board-nav" id="0">Info</div>
<div class="board-nav" id="1">Board1</div>
<div class="board-nav" id="2">Board2</div>
<div class="board-nav" id="3">Board3</div>
<div class="board-nav" id="4">Board4</div>
</div>
<div id="content" style="width:1612px; height:864px; position:absolute; left:58px; overflow:hidden">
<div class="scroller">
<ul class="vertical">
<li class="v" id="li0">
<div class="target"><span>Info</span></div>
</li>
<li class="v" id="li1">
<div class="target"><span>Board1</span></div>
</li>
<li class="v" id="li2">
<div class="target"><span>Board2</span></div>
</li>
<li class="v" id="li3">
<div class="target"><span>Board3</span></div>
</li>
<li class="v" id="li4">
<div class="target"><span>Board4</span></div>
</li>
</ul>
</div>
</div>
</body></html>
It seems that as soon as the parent div Y location becomes less than around -2000, all child elements become "disabled" in this manner. Prior to this (around -1900 for example), the elements are returned with all information valid. I can switch from Board 3, back to Board 2, and then all elements are returned correctly again. Back to Board 3 - all boards "disabled". So this seems to be a browser WebDriver limitation.
WebDriver C# test code :
var driver = new FirefoxDriver();
driver.Manage().Window.Maximize();
driver.Navigate().GoToUrl("testpage.html");
var elements = driver.FindElements(By.ClassName("v"));
return elements[3].FindElement(By.TagName("span")).Text;
Firefox handles this the best - it at least shows Info/Board1/Board2 before giving up. Chrome doesn't handle any of the Boards, returning the same Displayed = false, blank Text for all boards.
So my question is - is there any way to get around this? I can test the text on the other boards are correct, while Board1/Info is showing, but won't be able to interact with the last 2 Boards.
ANSWER:
Just resolved my problem by adding a height attribute to the parent div "scroller" element - my guess is WebDriver couldn't determine the height of the parent div and so assumed beyond a certain location it was no longer visible.
I've updated the code above and JSFiddle with the solution
I guess this happens Firefox and IE, but not Chrome? If so, then we are experiencing the similar issue. I suspect Chrome doesn't care about the WebDriver W3C standards and determines the visibility in a slightly different way.
If this answer is not related to your question, I hope it will still be beneficial for those find this through search engine.
The issue I'm facing is that Selenium returns elements as invisible, but real end users can see and perform actions without any issues. The best solution here would be change site's source code to make Selenium's FirefoxDriver and InternetExplorerDriver happy. As this is related to elements' positions and overlapping, which seems pretty hard to reproduce and fix.
However, apart from that, here are few workarounds and hacks through Selenium might be helpful.
Use element.GetAttribute("textContent") instead of element.Text for those invisible elements
return elements[3].FindElement(By.TagName("span")).GetAttribute("textContent");
Use Actions click or JavaScript click, instead of normal click. For example, if you need this method many time, you might want to create extension methods for either IWebElement or IWebDriver.
// example of JavaScriptClick extension method for IWebDriver
// use as driver.JavaScriptClick(element);
// or you can make it IWebElement's extension and pass in IWebDriver
// or just create a normal method and pass in both driver and element
public static void JavaScriptClick(this IWebDriver driver, IWebElement element) {
IJavaScriptExecutor executor = driver as IJavaScriptExecutor;
executor.ExecuteScript("arguments[0].click();", element);
}
public static void ActionsClick(this IWebDriver driver, IWebElement element) {
new Actions(driver).Click(element).Perform();
}
Related reading:
W3C WebDriver Standards - Determining Visibility
Why does the Selenium Firefox Driver consider my modal not displayed when the parent has overflow:hidden?
“Element is not currently visible and so may not be interacted with” but another is?
Selenium dom.js source