Search Results

Search found 23797 results on 952 pages for 'css framework'.

Page 78/952 | < Previous Page | 74 75 76 77 78 79 80 81 82 83 84 85  | Next Page >

  • Howto use predicates in LINQ to Entities for Entity Framework objects

    - by user274947
    I'm using LINQ to Entities for Entity Framework objects in my Data Access Layer. My goal is to filter as much as I can from the database, without applying filtering logic on in-memory results. For that purpose Business Logic Layer passes a predicate to Data Access Layer. I mean Func<MyEntity, bool> So, if I use this predicate directly, like public IQueryable<MyEntity> GetAllMatchedEntities(Func<MyEntity, Boolean> isMatched) { return qry = _Context.MyEntities.Where(x => isMatched(x)); } I'm getting the exception [System.NotSupportedException] --- {"The LINQ expression node type 'Invoke' is not supported in LINQ to Entities."} Solution in that question suggests to use AsExpandable() method from LINQKit library. But again, using public IQueryable<MyEntity> GetAllMatchedEntities(Func<MyEntity, Boolean> isMatched) { return qry = _Context.MyEntities.AsExpandable().Where(x => isMatched(x)); } I'm getting the exception Unable to cast object of type 'System.Linq.Expressions.FieldExpression' to type 'System.Linq.Expressions.LambdaExpression' Is there way to use predicate in LINQ to Entities query for Entity Framework objects, so that it is correctly transformed it into a SQL statement. Thank you.

    Read the article

  • AJAX or a server side framework?

    - by Romansky
    I am working with a friend on building a web site, in general this web site will be a custom web app along with a very custom social network type of thing.. Currently I have a mock-up site that uses simple PHP with AJAX and JSON and JQUERY and I love how it works, I love the way it all fits together. But for a mock-up I did not implement any of the Social Network design patterns such as a login, rating, groups etc.. This brought me to a higher level of decision making requirement, I need to decide if I want to develop all this functionality by hand or use some kind of a framework. I spent this entire day researching, and it would seem that using Drupal and such frameworks will make the Social Network part easy (overlooking the customization requirement for now..) but will make client side Web App development less so. I found some other frameworks that are more developer friendly (customizable) such as Zend and Symfony etc.. but these seem to take allot of the power from the client and implement it in the server side, to me this seems a waste (and an unjustified performance bottleneck) .. Finally I found Aptana Jaxer framework that seems to think the same way I feel. That said it seems a bit under-developed, I didn't find modules for a social network and the community around it seems thin.. (searching Jaxer in StackOverflow returns few results) So other then making server side DB comm a bit simpler it does not help me greatly.. My requirements are a good facility to develop web apps on while containing all the user centric logic usually used for social networks in advance. What would you recommend? EDIT: OK, lats fine tune this question, after considering this abit further, is there a good down loadable source of a social network site in PHP that I can work around in building my web app? (I really like using JQUERY AJAX JSON etc..)

    Read the article

  • entity framework navigation property further filter without loading into memory

    - by cellik
    Hi, I've two entities with 1 to N relation in between. Let's say Books and Pages. Book has a navigation property as Pages. Book has BookId as an identifier and Page has an auto generated id and a scalar property named PageNo. LazyLoading is set to true. I've generated this using VS2010 & .net 4.0 and created a database from that. In the partial class of Book, I need a GetPage function like below public Page GetPage(int PageNumber) { //checking whether it exist etc are not included for simplicity return Pages.Where(p=>p.PageNo==PageNumber).First(); } This works. However, since Pages property in the Book is an EntityCollection it has to load all Pages of a book in memory in order to get the one page (this slows down the app when this function is hit for the first time for a given book). i.e. Framework does not merge the queries and run them at once. It loads the Pages in memory and then uses LINQ to objects to do the second part To overcome this I've changed the code as follows public Page GetPage(int PageNumber) { MyContainer container = new MyContainer(); return container.Pages.Where(p=>p.PageNo==PageNumber && p.Book.BookId==BookId).First(); } This works considerably faster however it doesn't take into account the pages that have not been serialized to the db. So, both options has its cons. Is there any trick in the framework to overcome this situation. This must be a common scenario where you don't want all of the objects of a Navigation property loaded in memory when you don't need them.

    Read the article

  • How to use Transaction in Entity FrameWork?

    - by programmerist
    How to use Transaction in Entity FrameWork? i read some links on Stackoverflow : http://stackoverflow.com/questions/815586/entity-framework-using-transactions-or-savechangesfalse-and-acceptallchanges BUT; i have 3 table so i have 3 entities: CREATE TABLE Personel (PersonelID integer PRIMARY KEY identity not null, Ad varchar(30), Soyad varchar(30), Meslek varchar(100), DogumTarihi datetime, DogumYeri nvarchar(100), PirimToplami float); Go create TABLE Prim (PrimID integer PRIMARY KEY identity not null, PersonelID integer Foreign KEY references Personel(PersonelID), SatisTutari int, Prim float, SatisTarihi Datetime); Go CREATE TABLE Finans (ID integer PRIMARY KEY identity not null, Tutar float); Personel, Prim,Finans my tables. if you look Prim table you can see Prim value float value if i write a textbox not float value my transaction must run. using (TestEntities testCtx = new TestEntities()) { using (TransactionScope scope = new TransactionScope()) { // do someyihng... testCtx.Personel.SaveChanges(); // do someyihng... testCtx.Prim.SaveChanges(); // do someyihng... testCtx.Finans.SaveChanges(); scope .Complete(); success = true; } } How can i do that?

    Read the article

  • Entity framework self referencing loop detected

    - by Lyd0n
    I have a strange error. I'm experimenting with a .NET 4.5 Web API, Entity Framework and MS SQL Server. I've already created the database and set up the correct primary and foreign keys and relationships. I've created a .edmx model and imported two tables: Employee and Department. A department can have many employees and this relationship exists. I created a new controller called EmployeeController using the scaffolding options to create an API controller with read/write actions using Entity Framework. In the wizard, selected Employee as the model and the correct entity for the data context. The method that is created looks like this: // GET api/Employee public IEnumerable<Employee> GetEmployees() { var employees = db.Employees.Include(e => e.Department); return employees.AsEnumerable(); } When I call my API via /api/Employee, I get this error: ...The 'ObjectContent`1' type failed to serialize the response body for content type 'application/json; ...System.InvalidOperationException","StackTrace":null,"InnerException":{"Message":"An error has occurred.","ExceptionMessage":"Self referencing loop detected with type 'System.Data.Entity.DynamicProxies.Employee_5D80AD978BC68A1D8BD675852F94E8B550F4CB150ADB8649E8998B7F95422552'. Path '[0].Department.Employees'.","ExceptionType":"Newtonsoft.Json.JsonSerializationException","StackTrace":" ... Why is it self referencing [0].Department.Employees? That doesn't make a whole lot of sense. I would expect this to happen if I had circular referencing in my database but this is a very simple example. What could be going wrong?

    Read the article

  • Good Hosting Providers With Zend Framework Support

    - by manyxcxi
    I currently use ixwebhosting for my hosting services. They're cheap and work (most of the time). The databases are horribly slow, the servers are horribly slow, and their support (though usually prompt) is tough to deal with. That being said, they're cheap, I've got like 20 domains hosted in my account, none of them are high volume, and they work JUST good enough- until today. This isn't meant to be a condemnation of ixwh though. Their prices are very low for what they do offer and most things work just fine, most of the time. I need to be able to host web apps written with Zend Framework in a fairly easy fashion. The server performance can't be worse than what I've already had (a pretty low hurdle to clear), and I don't want to spend $30/mo. These are not money making websites- they're projects. My requirements are PHP 5.3, ZF support, MySQL databases, multiple domains- not much. Who should I look at, and who should I look out for? Also- I put this on SO instead of SF because of the Zend Framework specific requirement. If I'm wrong, do as you wish.

    Read the article

  • UpdateModelFromDatabaseException when trying to add a table to Entity Framework model

    - by Agent_9191
    I'm running into a weird issue with Entity Framework in .NET 3.5 SP1 within Visual Studio 2008. I created a database with a few tables in SQL Server and then created the associated .edmx Entity Framework model and had no issues. I then created a new table in the database that has a foreign key to an existing table and needed to be added to the .edmx. So I opened the .edmx in Visual Studio and in the models right-clicked and chose "Update Model From Database...". I saw the new table in the "add" tab, so I checked it and clicked finish. However I get an error message with the following text: --------------------------- Microsoft Visual Studio --------------------------- An exception of type 'Microsoft.Data.Entity.Design.Model.Commands.UpdateModelFromDatabaseException' occurred while attempting to update from the database. The exception message is: 'Cannot update from the database. Cannot resolve the Name Target for ScalarProperty 'ID <==> CustomerID'.'. --------------------------- OK --------------------------- For reference, here's the tables seem to be the most pertinent to the error. CustomerPreferences already exists in the .edmx. Diets is the table that was added afterwards and trying to add to the .edmx. CREATE TABLE [dbo].[CustomerPreferences]( [ID] [uniqueidentifier] NOT NULL, [LastUpdatedTime] [datetime] NOT NULL, [LastUpdatedBy] [uniqueidentifier] NOT NULL, PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] CREATE TABLE [dbo].[Diets]( [ID] [uniqueidentifier] NOT NULL, [CustomerID] [uniqueidentifier] NOT NULL, [Description] [nvarchar](50) NOT NULL, [LastUpdatedTime] [datetime] NOT NULL, [LastUpdatedBy] [uniqueidentifier] NOT NULL, PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO ALTER TABLE [dbo].[Diets] WITH CHECK ADD CONSTRAINT [FK_Diets_CustomerPreferences] FOREIGN KEY([CustomerID]) REFERENCES [dbo].[CustomerPreferences] ([ID]) GO ALTER TABLE [dbo].[Diets] CHECK CONSTRAINT [FK_Diets_CustomerPreferences] GO This seems like a fairly common use case, so I'm not sure where I'm going wrong.

    Read the article

  • adv. styling list with css

    - by Ayrton
    Hi I need to style a regular html list like the following picture: as you see each each list item has a padding on the sides and a top&bottom border. When hovered the border has a width of 100% of the <ul> item. Now the problem actually is: when you give each <li> element a top & bottom border I have a border of 2 px between each element (bottom border from the first element and the top border from the second element), I don't want that however I do not know any solution for this. my html: <div id="tab_top" class="tab"> <div class="bottom"> <div class="cont"> <ul> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> </ul> </div> </div> </div> my css: #tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;} #tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;} #tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;} #tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;} I would be pleased if you can help me Yours truthfully

    Read the article

  • CSS: Labels in table columns

    - by hello
    Hello. BACKGROUND: I would like to have small labels in columns of a table. I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit). THE PROBLEM With my current CSS approach, the vertical padding of the cell comes from the <span element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place. The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there. I realize that I could use "non-breaking-space", but I would really like to avoid it. I wonder if any of you have a fix / better way to do this? current code is below. Thank you for any help. <!DOCTYPE html> <html lang="en"> <head> <title>ah</title> <style> body { width: 320px; } /* TABLE */ table { width: 100%; border-collapse: collapse; font-family: arial; } th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; } th:last-child, td:last-child { border-right-width: 1px; } tr:first-child th { border-top-width: 1px; background: #efefef; } /* RELEVANT STUFF */ td { padding: 3px; } td sup { display: block; } td span { display: block; margin: 3px 0px; text-align: center; } </style> </head> <body> <table> <tr> <th colspan="3">something</th> </tr> <tr> <td><sup>some label</sup><span>any content</span></td> <td><sup>some label</sup><span>any content</span></td> <td><sup>some label</sup><span></span></td><!-- No content, just a label --> </tr> </table> </body> </html>

    Read the article

  • CSS: Horizontal, comma-separated list with fixed <li> width

    - by hello
    Hello, I would like to achieve the following structure: [gfhtfg..., kgjrfg..., asd, mrhgf, ] ^-------^ ^-------^ ^-------^ ^-------^ X X X X (X = a fixed length) I've got a <div> with a fixed length, and inside it an horizontal, comma-separated list (ul) of links. The <li> elements should have a fixed width, and so if the links exceed a fixed length an ellipsis will be shown (using the text-overflow property). I know two ways to make a list horizontal. One is using display: inline and the other using the float property. With the first approach, I can't set a fixed width because the CSS specification doesn't allow setting the width of inline elements. The second approach creates a mess :O Setting float on the <a> element, intending to limit the width there, separates it from the commas. There are no browser-compatibility issues, I only have to support WebKit. I included the code I attempted to work with: <!DOCTYPE html> <html lang="en"> <head> <title>a title</title> <style> body { font-family: arial; font-size: 10pt; } div { height: 30px; width: 300px; background: #eee; border: 1px solid #ccc; text-align: center; } ul { margin: 0px; padding: 0px; } ul li:after { content: ","; } ul li:last-child:after { content: ""; } ul li a { text-decoration: none; color: #666; } ul li { margin: 0px; padding: 0px; list-style: none; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; /* Inline elements can't have a width (and they shouldn't according to the specification */ display: inline; width: 30px; } </style> </head> <body> <div> <ul> <li><a href="#">a certain link</a></li> <li><a href="#">link</a></li> <li><a href="#">once again</a></li> <li><a href="#">another one</a></li> </ul> </div> </body> </html> Thank you.

    Read the article

  • Many DIVs inside parent DIV, CSS height issue

    - by Benjamin
    Hi everyone, I am putting together a dynamic photo gallery and getting stuck trying to place thumbnails. Basically I am trying to place each thumbnail and caption in its own DIV, floated to the left. The thumbnails are working just as I want them to but for some reason the parent DIV refuses to cover the height of the thumbnail area. Here is the CSS I am using.. #galleryBox { width: 650px; background: #fff; margin: auto; padding: 5px; text-align: center; } .item { display: block; margin: 10px; padding: 10px; float: left; background: #353535; min-width: 120px; } .label { display: block; color: #fff; } I have tried height: auto and that hasn't done anything. Here is what I am trying to style: <div id="galleryBox" class="ui-corner-all"> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> </div> Thanks!

    Read the article

  • ie9/CSS: Flyout menu not working in ie9, but looks great in Firefox/Chrome

    - by Brandon
    Please see this flyout menu: http://www.caseen.com/store.html. It looks amazing in both Firefox and Chrome, but not in IE9! Trying to see what is going on =(. It looks like ie9 is completing ignoring the stylesheet, but in error checking and clicking ie9 direct mode, it shows up however VERY ugly with huge nasty white borders around the links! Please see my code: <div class="flyout"> <ul> <!--START: CATEGORIES--> <!--START: CATEGORY_FORMAT--> <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a> <!--END: CATEGORY_FORMAT--> <ul><!--START: SUB_CATEGORY_FORMAT--> <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a></li> <!--END: SUB_CATEGORY_FORMAT--></ul> <!--END: CATEGORIES--> </li> </ul> </div> AND CSS .flyout { width: 130px; height: auto; position:relative; margin: -10 0; padding: 0; z-index:10000; } .flyout ul li a { display:block; text-decoration:none; color: #fff; width: 130px; border: solid; border-color: #000; border-width: 0 0 0 5px; text-align:left; font-size:12px; line-height: 25px; } .flyout ul { padding:0px; list-style-type: none; } .flyout ul li { float:left; margin-right:1px; position:relative; } .flyout ul li ul { display: none; } .flyout ul li:hover a { border: solid; border-color: #fff; border-width: 0 2 0 5px; color: #60dfe5; } .flyout ul li:hover ul { display:block; position:absolute; top:0; left:130px; width:10px; } .flyout ul li:hover ul li a.hide { background:#000; color:#fff; } .flyout ul li:hover ul li:hover a.hide {width:180px;} .flyout ul li:hover ul li ul {display: none;} .flyout ul li:hover ul li a { display:block; background:#000; color:#60dfe5; width:200px; } .flyout ul li:hover ul li a:hover { background:#000; color:#fff; } Thanks, Brandon

    Read the article

  • Am I suffering "divitis"? (CSS especialist needed)

    - by janoChen
    I've read lots of articles that condemn the excessive use of divs. I have a feeling that I might be doing that in the following mark up: HTML: <div id="header"> <div class="container"> <div id="banner"> <h1><a href="http://widerdesign.co.nr/">wider design</a></h1> <ul id="lang"> <li><a href="index.php">English</a></li> <li><a href="es/index.php">Español</a></li> <li><a href="tw/index.php">??(??)</a></li> <li><a href="cn/index.php">??(??)</a></li> </ul> </div> <div id="intro"> <div id="tagline"> <h2>Nulla vitae tortor mauris</h2> <p>Pellentesque faucibus est eu tellus varius in susc...</p> </div> <div id="about"> <h2>right</h2> <p>Pellentesque faucibus est eu tellus varius in susc...</p> </div> </div><!-- #intro --> </div><!-- .container --> </div><!-- #header --> CSS: .container { margin: 0 auto; overflow: hidden; width: 960px; } /* header */ #header { background: #EEE; } #header h1 { float: left; } #header h2, #header a, #header p { color: #999; } #header h1 a { background: url(../images/logo.png) no-repeat scroll 0 0; float: left; height: 30px; text-indent: -9999px; width: 500px; } #banner { border-bottom: 1px solid #DDD; padding: 0 0 15px 0; margin: 30px 0 30px 0; overflow: hidden; width: 960px; } #lang { float: right; padding: 9px 0 0 0; } #lang li { float: left; margin: 0 0 0 20px; } #lang li a { font-size: 10px; } /* intro */ #intro { overflow: hidden; padding: 0 0 30px 0; } #tagline { float: left; margin: 0 40px 0 0; width: 540px; /* 560 */ } #tagline h2 { font-size: 24px; } #about { float: right; width: 380px; } Explanation of the use of those divs: header: Defines the background color which expands until the end of the window (lies outside of the div .container). container: centers the content (but not the background). banner: to define the background or border color around ul#lang and h1. intro: same as above but for #tagline and #about (otherwise I have to define say padding or margin for tagline and about individually). Am I overusing divs? Can this be simplified?

    Read the article

  • CSS selector driving me nuts!!!

    - by YsoL8
    Apoologies in advance for the slightly long winded code in this question @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; } #wrapper { width:900px; margin:0 auto 0 auto; } #header { background-color:#800080; width:894px; min-height:60px; padding-top:6px; padding-left:6px; } #header img { margin-left:200px; margin-top:10px; } #headerleft { float:left; } #header h2 { font-family:Arial Black, Arial, Helvetica, sans-serif; color:#ffff00; font-size:36px; /*float:left;*/ } #header h3 { font-family:Arial Black, Arial, Helvetica, sans-serif; color:#ffff00; font-size:14px; } #nav { background-color:#800080; width:100%; min-height:30px; } #nav ul { padding-left:7px; padding-right:7px; } #nav li { list-style:none; display:inline; padding:5px 44px 5px 44px; } #nav li a { color:#FFF; text-decoration:none; } #nav li a:hover { color:#ffff00; } #leftcol { background-color:#800080; width:125px; min-height:30px; float:left; } #leftcol img { margin-left:20px; margin-bottom:20px; } .content { padding:20px 10px 10px 20px; float:left; } <!-- admin classes --> .pageselect p { color:#C90; } #rightcol { /*background-color:#800080;*/ width:160px; min-height:330px; float:right; } .righthead { margin-top:7px; background-image:url(../images/rightcol-head.png); color:#FFF; padding: 5px 20px 5px 20px; font-size:14px; } .rightmid { background-image:url(../images/right-mid.jpg); padding: 5px 10px 5px 10px; font-size:14px; } .rightfoot { background-image:url(../images/right-foot.jpg); background-repeat:no-repeat; } .clear { clear:both; } #footer { background-color:#800080; width:880px; min-height:30px; margin-top:-20px; padding-top:30px; padding-left:20px; padding-bottom:10px; } #footer p { color:#ffff00; } #footer p a { color:#ffff00; text-decoration:none; } #footer p a:hover { font-weight:bold; } .error { color:#C30; } I have the above stylesheet. I am attempting to style the following element (taken from firefox web developer tools): html > body > div#wrapper > div#leftright > div.content > div.pageselect To my mind .pageselect should be the selector to do that, but I seem to be powerless to influence the style, and its just about sending me wacko! Why won't this work?

    Read the article

  • any suggestions on this css print problem

    - by user225269
    I have this code on my print.css: #header, #tae, #nav, .noprint {display: none;} width: 100%; margin: 0; float: none; In order not to display the elements within those div tags. But I don't know with the code below why it isn't cooperating. If I place the div tags on it. And then I hit the print button. I see no output. Here it is: <div id="tae"> <table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1"> <tr> <td class="text1" style="height: 50px;">xd627 information management system</td> </tr> <tr> <td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;"> <tr align="center"> <td><a href="userpage.php" class="link1">Homepage</a></td> <td><a href="RegStuds.php" class="link1">Database</a></td> <td><a href="#" class="link1">About</a></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table></td> </tr> <tr> <td valign="top" class="bg6">&nbsp;</td> </tr> <tr> <td><table width="780" border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <td width="20">&nbsp;</td> <td width="297"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/spacer.gif" alt="" width="30" height="30" /></td> </tr> </tr> <tr> <td class="text2"> </div> <div id="max"> <?php //some php code in here showing a mysql table. ?> </div> What's wrong with my code? Does the php script depend on the one where I put the div tag in? What do I do? All I want to show up in my page when printed is the mysql table. I'm using Universal Document Converter to simulate printing.

    Read the article

  • HTML/JS/CSS issue getting bigger by itself

    - by Azzyh
    Here's the picture to begin with. I have this check box, that when you check, then with jQuery toggle(); it hides that you see in first half of the picture (#writeComment) and shows #SCtryVOTE (what you see in the other half picture, to the right). Now i dont know why but of some reason it expands when its checked, why i dont know, is it because it needs more place than it have or? how do i make this work without having problems when its checked. Here's coding: $('#tryout').click(function () { $('#writeComment').toggle(!$(this).attr('checked')); $('#SCtryVOTE').toggle($(this).attr('checked')); }); the js jquery script part, heres the table and divs HTML part: <input type="checkbox" id="tryout"> <table align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer"> <tr style="background: #686868;"> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> </td> </tr> <tr> <td align="left" valign="top" width="70" height="112" style=""> TEST </td> <td align="left" valign="top" width="70" height="112" style=""> <div id="writeComment"> Smid en kommentar:<br> <form action="javascript:DoInsert()" method="post"> <textarea id="kommentar" name="kommentar"></textarea><br /> <input type="hidden" name="fID" id="fID" value="<? echo $_GET["id"]; ?>"> <input type="submit" name="Submit" value="Sæt ind!"> </form> </div> <div id="SCtryVOTE" style="display: none;"> <form onsubmit="if (!this.comment.cleared) clearContents( document.getElementById('comment') ); return true;" action="javascript:DoSCInsert()" method="post"> <textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>Tryk for at skrive. Skal være detaljeret og grundet.</textarea> <br>Ja: <input type="radio" value="Y" id="SCvoteY" name="vote"></input> Nej: <input type="radio" id="SCvoteN" value="N" name="vote"> </input> <input type="submit" id="SCstem" name="Submit" value="Stem!"> </form> </div> Maybe you need the CSS part too for these two boxes: #writeComment{ position: relative; left: 5px; top: 10px; } #SCtryVOTE{ position: relative; left: 5px; top: 10px; }

    Read the article

  • CSS Menu loses focus when part of jquery hover()

    - by Steve Syfuhs
    I have the following html (viewable at www.communityftw.com) <table width="100%"> <tr> <td style="text-align: left"> <!-- 2008.3.1314.35 --><span id="headerSearch1_sb_form_q_wrapper" class="RadInput_Default" style="white-space:nowrap;"><input value="language..." type="text" size="20" id="headerSearch1_sb_form_q_text" name="headerSearch1_sb_form_q_text" class="riTextBox riEmpty sw_qboxTop" name="q" style="width:140px;" /><input id="headerSearch1_sb_form_q" name="ctl00$headerSearch1$sb_form_q" class="rdfd_" style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" type="text" value="" /><input id="headerSearch1_sb_form_q_ClientState" name="headerSearch1_sb_form_q_ClientState" type="hidden" /></span> <input type="submit" name="ctl00$headerSearch1$sb_form_go" value="" id="headerSearch1_sb_form_go" class="sw_qbtnTop" /> </td> <td style="text-align: left"> <ul id="menu"> <li class="languageContainer"> <div> <a href="#" id="languageField"> <img src="/images/flags/ca.png" alt="Canada" /> Canada (English)</a> </div> <ul id="language"> <li><a href="#" id="A1"> <img src="/images/flags/ca.png" alt="Canada" /> Canada (French)</a> </li> <li><a href="#" id="A2"> <img src="/images/flags/us.png" alt="United States" /> United States</a> </li> <li><a href="#" id="A3"> <img src="/images/flags/de.png" alt="Germany" /> Germany</a> </li> <li><a href="#" id="A4"> <img src="/images/flags/fr.png" alt="France" /> France</a> </li> <li><a href="#" id="A5"> <img src="/images/flags/ru.png" alt="Russia" /> Russia</a> </li> <li class="last"> <img alt="" src="images/langLocDrop_r4_c1.png" /> </li> </ul> </li> </ul> </td> </tr> </table> Javascript/jquery $('#slide').animate({ top: '-=34' }, 1000); $("#slide").hover(function () { $(this).animate({ top: '+=34' }); }, function () { $(this).animate({ top: '-=34' }); }); menu { margin: 0px; padding: 0px; list-style: none; display: inline-block; float: left; z-index: 1000; } menu a { color: #dc2525; text-decoration: none; } menu li { background: none repeat scroll 0 0; cursor: pointer; float: left; position: relative; } menu li a:hover { color: orange; } menu ul { padding: 0px; margin: 0px; display: block; display: inline; } menu li ul { position: absolute; left: -15px; top: 0px; margin-top: 20px; width: 170px; line-height: 16px; background-image: url(/images/langLocDrop_r2_c1.png); display: none; } menu li:hover ul { display: block; } menu li ul li { display: block; margin: 5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type: none; } menu li ul li:first-child { border-top: none; } menu li ul li a { display: block; } menu li ul li a:hover { color: orange; } .languageContainer div { display: inline; padding: 5px; } languageField img { display: inline; vertical-align: middle; } language img { display: inline; } menu .last { background: transparent none repeat scroll 0% 0%; margin: 0px; padding: 0px; border: none; position: relative; border: none; height: 0px; } What I'm trying to do is have a menu mostly hidden at the top except when you mouse over it, and then have a submenu (just css driven) pop out when you mouse over the language. What is happening though is that when I move onto the language list, and I go past Germany (~50% down the list?), the hover() loses focus and closes the original menu, which closes the language menu. Any idea's what is causing the issue? Any ideas how to fix the issue? I have tried the hoverIntent() plugin as well to no avail.

    Read the article

  • Problems with a from CSS

    - by Michael
    I am trying to create a fairly basic form with in my maincontent. I am sure I am coding things incorrectly and it is driving me crazy. Note my code. I get extremely wide vertical spacing in IE 7 and the bacground color between the field sets does not work correctly. All is good in FF. My CSS is: fieldset { margin: 1.5em 0 0 0; padding: 0; border-style: none; border-top: 1px solid #BFBAB0; background-color: #FFFFFF; } legend { margin-left: 1em; color: #000000; font-weight: bold; } fieldset ol { padding: 1em 1em 0 1em; list-style: none; } fieldset li { padding-bottom: 1em; } fieldset.submit { border-style: none; } { var w = document.myform.mylist.selectedIndex; var selected_text = document.myform.mylist.options[w].text; alert(selected_text); } label em { display: block; color: #900; font-size: 85%; font-style: normal; text-transform: uppercase; } This is my html code. <div id="mainContent1"> <form name="myform"> <label for="mylist"><strong>Select an Account Type:</strong></label> <select name="mylist"><option value="traditional">Traditional Account</option> <option value="paperless">Paperless Account</option> </select> </form> <br /><a> </a> <form action="example.php"> <fieldset> <legend>Contact Details</legend> <ol> <li> <label for="name">Name:</label> <input id="name" name="name" class="text" type="text" /> <label for="name"> <em>required</em> </label> </li> <li> <label for="email">Email address:</label> <input id="email" name="email" class="text" type="text" /> <label for="name"> <em>required</em> </li> <li> <label for="phone">Telephone:</label> <input id="phone" name="phone" class="text" type="text" /> <label for="name"> <em>required</em> <ol> <li> <input id="option1" name="option1" class="checkbox" type="checkbox" value="1" /> <label for="option1">Savings</label> </li> <li> <input id="option2" name="option2" class="checkbox" type="checkbox" value="1" /> <label for="option2">Checkings</label> </li> </ol> </fieldset> <fieldset> <legend>Delivery Address</legend> <ol> <li> <label for="address1">Address 1:</label> <input id="address1" name="address1" class="text" type="text" /> </li> <li> <label for="city">City:</label> <input id="city" name="city" class="text" type="text" /> </li> <li> <label for="postcode">Zip Code:</label> <input id="postcode" name="postcode" class="text textSmall" type="text" /> </li> <li> <label for="country">Country:</label> <input id="country" name="country" class="text" type="text" /> </li> </ol> </fieldset> <fieldset class="submit"> <input class="submit" type="submit" value="Submit" /> </fieldset> <fieldset class="clear"> <input class="clear" type="clear" value="Submit" /> </fieldset> </form>

    Read the article

  • Odd problem with IE8 and z-index CSS property

    - by DK39
    I not been able to put one DIV over his parent DIV in Internet Explorer. With Firefox is working as suposed to. The odd part is that if I open the html file directly in IE, everything works fine. But if I upload to the server and open from there, the div is hidden underneath his parent. I've tried several z-index combinations and none works. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Test</title> <meta http-equiv="content-type" content="text-html; charset=utf-8" /> <style type="text/css"> .col { float:left; width:310px; margin-right:13px; } .art { position:relative; border-bottom: 1px solid #d0d0d0; font: normal normal bold 11px Arial,Verdana,Helvetica; color:#A0A0A0; width:310px; height:50px; top:0px; left: 0px; margin-right:10px; background-color:#F0F0F0; } .art a { padding:3px; display:block; width:304px; height:100%; color:#707070; } .art a:visited { color:#A0A0A0; } .art a:hover { background-color:#E0E0E0; } .box { z-index:1000; background-color:#A0A0A0; color:#404040; font: normal normal bold 11px Arial,Verdana,Helvetica; display:none; position:absolute; top:30px; left:10px; text-align:left; border:3px solid #707070; margin:5px 0px 5px 5px; font-size:10px; color:White; width:100%; } </style> <script type="text/javascript"> function sh(obj) { var el = document.getElementById(obj); if ( el.style.display != 'block' ) { el.style.display = 'block'; } else { el.style.display = 'none'; } } </script> </head> <body> <div class="col"> <div class="art"> <a href="" target="_blank" onmouseover="javascript:sh('i0')" onmouseout="javascript:sh('i0')">Title 1</a> <div id="i0" class="box"> <div class="text"> Les "chemises rouges" manifestent depuis la mi-mars pour faire tomber le gouvernement et occupent depuis trois semaines un quartier touristique et commerçant autour duquel ils ont érigé des barricades. </div> </div> </div> <div class="art"> <a href="" target="_blank" onmouseover="javascript:sh('i1')" onmouseout="javascript:sh('i1')">Title2</a> <div id="i1" class="box"> <div class="text"> Une association ardéchoise accueillant des séminaires de "bien-être" et de "développement personnel" a refusé d'accueillir un stage de danse en invoquant l'homosexualité des participants, ont indiqué aujourd'hui les organisateurs. </div> </div> </div> </div> </body> </html> What's is going on here?

    Read the article

  • Help for CSS Menu Dropdown, FF OK and IE6 Problem

    - by Taruhku
    IE Problem, FF OK. Please help..???? Screen Shoot problem click here This is my CSS dolphincontainer { position:relative; height:56px; color:#E0E0E0; background:#143D55; width:100%; font-family:Tahoma; left: 0px; } dolphinnav {position:absolute;;height:33px;font-size:12px;font-weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 10px;width:975px;} dolphinnav ul {margin:0;padding:0;list-style-type:none;width:auto;float:left;} dolphinnav ul li {display:block;float:left;margin:0 1px;} dolphinnav ul li a {display:block;float:left;color:#001b2c;text-decoration:none;padding:0 0 0 10px;height:33px;} dolphinnav ul li a span {padding:12px 20px 0 0;height:21px;float:left;font-weight:bold;} dolphinnav ul li a:hover {color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;} dolphinnav ul li a:hover span {display:block;width:auto;cursor:pointer;} dolphinnav ul li a.current,#dolphinnav ul li a.current:hover {color:#fff;background:#00517e url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;} dolphinnav ul li a.current span {display:block;padding:0 20px 0 0;width:auto;background:#00517e url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;} .tuckUp { display:block; width:90px; height:30px; overflow:hidden; cursor:pointer; } .pullDown { width:90px; height:56px; } .item a:link, .item a:visited { display:inline; float:left; background:#fff url(images/dolphin_bg.gif) repeat-x top left;padding:0 0 0 10px; text-align:left; color:#444; font-size:11px; font-weight:bold; text-decoration:none; line-height:25px; margin:0 5px 0px 0px; width:80px; } .item a:hover { display:inline; float:left; background:#39c; color:#FFF; text-decoration:none; text-align:left; font-size:11px; font-weight:700; font-weight:bold; line-height:25px; padding:0 0 0 10px; margin:0 5px 0px 0px; width:80px; } HTML: <div id="dolphincontainer"> <div id="dolphinnav"> <ul> <li><a href="index.php"><span>Home</span></a></li> <li><a href="chooseus.php"><span>Why Choose Us</span></a></li> <li><a href="peraturan.php"><span>Rules</span></a></li> <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'"><a href="#"><span>Transaction</span></a> <div class="item"> <a href="drop1.php">Drop Down 1</a><br /> <a href="drop2.php">Drop Down 2</a></a><br /> <a href="drop3.php">Drop Down 3</a><br /> </div> </li> <li><a href="download.php"><span>Download</span></a></li> <li><a href="aboutus.php"><span>About Us</span></a></li> <li><a href="help.php" class="current"><span>Support</span></a></li> <li><a href="promo.php"><span><font color="#FF0000"><blink>PROMO</blink> </font></span></a></li> </ul> </div> </div>

    Read the article

  • CSS content overflowing containing div

    - by kaese
    Hi, Currently have a problem with some DIVs overlapping their containing DIVs. See image below (the 3 products at the bottom): All the body content of the page is held within the #content DIV: div#content { width: 960px; float: left; background-image: url("../img/contentBg.png"); background-repeat: repeat; margin-top: 10px; line-height: 1.8em; border-top: 8px solid #5E88A2; padding: 10px 15px 10px 15px; } And here is the CSS for the product boxes within the #content div: .upper { text-transform: uppercase; } .center { text-align: center; } div#products { float: left; width: 100%; margin-bottom: 25px; } div.productContainer { float: left; width: 265px; font-size: 1em; margin-left: 50px; height: 200px; padding-top: 25px; text-align: right; } div.product { float: left; width: 200px; } div.product p { } div.product a { display: block; } div.product img { float: left; } div.product img:hover { opacity: 0.8; filter: alpha(opacity = 80); } div.transparent { opacity: 0.8; filter: alpha(opacity = 80); } And here is the HTML for the boxes: <div class="productContainer"> <div class="product"> <h2 class="upper center">A2 Print</h2> <a href='../edit/?productId=5&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through MyPersonalPoster." /></a> <p class="upper">16.5 inches x 23.4 inches<br /><strong>&pound;15.99</strong></p> <p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span> </em></p> <p><a href='../edit/?productId=5&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> <div class="productContainer"> <div class="product transparent"> <h2 class="upper center">A1 Print</h2> <a href='../edit/?productId=11&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through MyPersonalPoster." /></a> <p class="upper">23.4 inches x 33.1 inches<br /><strong>&pound;19.99</strong></p> <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p> <p><a href='../edit/?productId=11&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> <div class="productContainer"> <div class="product transparent"> <h2 class="upper center">Poster Print (60cm x 80cm)</h2> <a href='../edit/?productId=12&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through MyPersonalPoster." /></a> <p class="upper">23.6 inches x 31.5 inches<br /><strong>&pound;13.95</strong></p> <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p> <p><a href='../edit/?productId=12&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> Any idea what could be causing these DIVs to overlap? What I'd like is for all the boxes to fit within the #container div as expected. It's driving me crazy! Cheers

    Read the article

  • CSS: Centering a floated block level element in IE6 (It almost works)

    - by Louis W
    I have a block level element which I am centering on the page. I have gotten it to work for all other browsers except IE6 where it ALMOST works. http://tinyurl.com/28sh9eq If I view the page in IE6 the red box is slightly off center of the pink one in IE. If I then resize the browser window it snaps into place where I want it. Uhhhhh.... yea.... what gives? How come resizing the window makes it work? I have also tried setting an explicit width on the wrapper with no avail. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <style type="text/css"> BODY { text-align: center; font-family: Arial; } .row_wrap { height: 100px; margin-bottom: 30px; background-color: pink; } .row { float: right; position: relative; left: -50%; text-align: left; clear: both; } .button1 { color: #FFF; height: 36px; text-decoration: none; position: relative; padding: 0 30px; background: url('button.gif') no-repeat 0 0; display: block; float: left; left: 50%; } .button1 .end { width: 20px; height: 37px; position: absolute; right: -2px; top: 0; background: url('button.gif') no-repeat right 0; } .button1 .text { font-size: 16px; font-weight: bold; white-space: nowrap; height: 36px; padding-top: 7px; display: block; float: left; } .button1 .text .arrow { vertical-align: 1px; } </style> </head> <body> <h2>RTL: Button 1</h2> <div class="row_wrap"> <div class="row" dir="rtl"> <a href="#" class="button1"> <span class="end"></span> <span class="text"><span class="arrow">»</span> Hello 1.</span> </a> </div> </div> <h2>RTL: Button 1-2</h2> <div class="row_wrap" style="width: 400px;"> <div class="row" dir="rtl"> <a href="#" class="button1"> <span class="end"></span> <span class="text"><span class="arrow">»</span> Hello 1.</span> </a> </div> </div> <br/><br/> <h2>Normal: Button 1</h2> <div class="row_wrap"> <div class="row"> <a href="#" class="button1"> <span class="end"></span> <span class="text"><span class="arrow">»</span> Hello.</span> </a> </div> </div> </body> Thanks for your help.

    Read the article

  • CSS Position Help (horizontal sidebar showing up when animate content over)

    - by jstacks
    Let me try my best to explain what I'd like to have happen, show you the code I have an hopefully I can get some help. So, I'm trying to do a sliding navigation UI from the left side of the screen (like a lot of mobile apps). The main content slides over, displaying the navigation menu beneath. Right now the browser thinks the screen is getting wider and introduces a horizontal scroll bar. However, I don't want that to happen... How do I get the div to animate off screen but not enlarge the width of the screen (i.e. keep it partially off screen)? Anyway here is my fiddle: http://jsfiddle.net/2vP67/6/ And here is the code within the post: HTML <div id='wrapper'> <div id='navWide'> </div> <div id='containerWide'> </div> <div id='containerTall'> <div id='container'> <div id='nav'> <div id='navNavigate'> Open Menu </div> <div id='navNavigateHide'> Close Menu </div> </div> </div> </div> <div id='sideContainerTall'> <div id='sideContainer'> <div id='sideNav'>Side Navigation </div> </div> </div> </div> CSS #wrapper { width:100%; min-width:1000px; height:100%; min-height:100%; position:relative; top:0; left:0; z-index:0; } #navWide { color: #ffffff; background:#222222; width:100%; min-width:1000px; height:45px; position:fixed; top:0; left:0; z-index:100; } #containerWide { width:100%; min-width:1000px; min-height:100%; position:absolute; top:45px; z-index:100; } #containerTall { color: #000000; background:#dadada; width:960px; min-height:100%; margin-left:-480px; position:absolute; top:0; left:50%; z-index:1000; } /***** main container *****/ #container { width:960px; min-height:585px; } #nav { color: #ffffff; background:#222222; width:960px; height:45px; position:fixed; top:0; z-index:10000; } #navNavigate { background:yellow; font-size:10px; color:#888888; width:32px; height:32px; padding:7px 6px 6px 6px; float:left; cursor:pointer; } #navNavigateHide { background:yellow; font-size:10px; color:#888888; width:32px; height:32px; padding:7px 6px 6px 6px; float:left; cursor:pointer; display:none; } #sideContainerTall { background:#888888; width:264px; min-height:100%; margin-left:-480px; position:absolute; top:0; left:50%; z-index:500; } #sideContainer { width:264px; min-height:585px; display:none; } #sideContainerTall { background:#888888; width:264px; min-height:100%; margin-left:-480px; position:absolute; top:0; left:50%; z-index:500; } #sideContainer { width:264px; min-height:585px; display:none; } #sideNav { width:264px; height:648px; float:left; } Javascript $(document).ready(function() { $('div#navNavigate').click(function() { $('div#navNavigate').hide(); $('div#navNavigateHide').show(); $('div#sideContainer').show(); $('div#containerTall').animate({ 'left': '+=264px' }); }); $('div#navNavigateHide').click(function() { $('div#navNavigate').show(); $('div#navNavigateHide').hide(); $('div#containerTall').animate({ 'left': '-=264px' }, function() { $('div#sideContainer').hide(); }); }); });

    Read the article

  • mootools slideshow not working with JQuery. Need help !

    - by Shantanu Gupta
    I am working on a site http://tapasya.co.in where i just impemented mootools slideshow. But I noticed that menubar that i was using stopped working, it was supposed to drop horizontaly but it is not being displayed now. I have used jquery for it. Please see the source of the web page. What can be the problem ? Mootools conflicting with javascript or some other problem. If I tries to use $.noConflict() it throws me an error in script Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B}var A=$type(B);return($[A])?$[A](B,C,this.document):null} has no method 'noConflict' I tried the given solution below. But it is not working. <script type="text/javascript" src="<%= ResolveUrl("~/Js/jquery-1.3.2.min.js") %>" ></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/mootools.js") %>"></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/slideshow.js") %>"></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/lightbox.js") %>"></script> <script type="text/javascript"> // <![CDATA[ $.noConflict(); var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function ddmenu_open(){ ddmenu_canceltimer(); ddmenu_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible'); } function ddmenu_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); } function ddmenu_timer(){ closetimer = window.setTimeout(ddmenu_close, timeout); } function ddmenu_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null; }} $(document).ready(function(){ $('#ddmenu > li').bind('mouseover', ddmenu_open) $('#ddmenu > li').bind('mouseout', ddmenu_timer) }); document.onclick = ddmenu_close; // ]]> </script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = { '1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' } }; // Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image. //http://code.google.com/p/slideshow/wiki/Slideshow#Options: var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002}); // Here we create the Lightbox instance. // In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible. var box = new Lightbox({ 'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow), 'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow) }); }); //]]> </script>

    Read the article

  • $.noConflict() not working with mootools slide show. Need help !

    - by Shantanu Gupta
    I am working on a site http://tapasya.co.in where i just impemented mootools slideshow. But I noticed that menubar that i was using stopped working, it was supposed to drop horizontaly but it is not being displayed now. I have used jquery for it. Please see the source of the web page. What can be the problem ? Mootools conflicting with javascript or some other problem. If I tries to use $.noConflict() it throws me an error in script Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B}var A=$type(B);return($[A])?$[A](B,C,this.document):null} has no method 'noConflict' I tried the given solution below. But it is not working. <script type="text/javascript" src="<%= ResolveUrl("~/Js/jquery-1.3.2.min.js") %>" ></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/mootools.js") %>"></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/slideshow.js") %>"></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/lightbox.js") %>"></script> <script type="text/javascript"> // <![CDATA[ $.noConflict(); var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function ddmenu_open(){ ddmenu_canceltimer(); ddmenu_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible'); } function ddmenu_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); } function ddmenu_timer(){ closetimer = window.setTimeout(ddmenu_close, timeout); } function ddmenu_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null; }} $(document).ready(function(){ $('#ddmenu > li').bind('mouseover', ddmenu_open) $('#ddmenu > li').bind('mouseout', ddmenu_timer) }); document.onclick = ddmenu_close; // ]]> </script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = { '1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' } }; // Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image. //http://code.google.com/p/slideshow/wiki/Slideshow#Options: var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002}); // Here we create the Lightbox instance. // In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible. var box = new Lightbox({ 'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow), 'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow) }); }); //]]> </script>

    Read the article

< Previous Page | 74 75 76 77 78 79 80 81 82 83 84 85  | Next Page >