I'm a novice web designer and I am trying to design a pop up div contact for/box. I've been researching for an entire week, longer really, on how to create a pop up div with a modal layer. My website hosting doesn't allow for in-depth HTML, CSS and JS customization, so while I've discovered what appeared to be good plugins/templates, I can't really use them because of my limited access. (At least, they didn't work when I did try to use some of them.) All I can really customize is the section of my webpages and then I can add HTML snippets to the page. Everything else I have to jimmy-rig into these two areas; very limiting as you imagine.
I finally found some code I could use though, and after learning some CSS and javascript, I was able to successfully create my pop up div contact form/box. I figured out that I had to put the CSS and JS in the section and then add the simple div for pop up modal purposes to the page via the HTML tool from my host's website building application.
But there are issues. I discovered the code I discovered and adapted to my site isn't that great. There something going on with the formatting that prevents the modal opacity layer from being the correct size (and I have tried everything I could think of to fix it, but to no avail). Also, the way my pop up div is centered just doesn't seem 100% right. It "functions", but I want it to function appropriately. The other issue is compatibility between browsers. I've been designing my website and checking my progress in Chrome, and it works fine. But it gets mangled on IE8 and Firefox.
Well, after this very short glimpse at success, I started researching for a final solution. Using Chrome's developer tools, I was able to track down various elements of functioning modal popups on websites other than my own and stumbled upon SimpleModal, which happens to be the nifty little modal popup tool that my web hosting company uses. However, I've been unable to install it correctly using the demo code of SimpleModal.
SO COULD SOMEONE PLEASE TELL ME HOW TO INSTALL SIMPLEMODAL? And if necessary, I can post the code from my website in a comment (as much as I can fit at a time at least; there seems to be a limit...) and someone can see firsthand my troubles if that helps?....THANKS!
MY WEBSITE:
http://solitairethahalo.com/
You should look deeper into the inability to use Javascript. Which host are you using?
If you do find that you are able to use js, then, instead of going around, getting plugins from everywhere, and creating a mess in your DOM, you should start your projects using a boilerplate.
Check out http://www.initializr.com/ and use the bootstrap option. This will set you up with LESS stylesheets and incorporate Twitter Bootstrap which will do exactly what you want with your modal.
Once you have your page setup, using bootstrap you should be able to turn any div into a modal in your script.js file by calling the modal method on it (from bootstrap)
$('#myModal').modal(options)
You can find the bootstrap documentation here http://twitter.github.com/bootstrap
hope it helps!
Related
I’ve been using cf7 for a while now and I must say, good job!
At the moment the problem I’m experiencing is that any text I insert using Divi builder just vanishes and although the I-beam cursor still shows when going over the text I cant seem to find out the reason why the text doesn’t show (the text is located in the middle of the screen on the background image).
I’ve inspected suspected elements and found no luck within the css of both cf7 and divi.
I’ve removed and inserted the shortcode and the problem definitely resides within cf7
Any idea what the cause of this could be?
More information would be helpful. There might be a conflict between CF7 and Divi but that's not likely the case. Elegant Themes recognizes that CF7 is a super popular plugin and even wrote a blog post about how to style it.
Are you using a child theme? Did you make any customizations to your CSS, functions file, etc? Without being able to see the code it's much tougher to troubleshoot, even a screenshot would be better.
Hi all,
I have been working on this website here through the Weebly editor. I studied Web Development 10 years ago and have only been getting back into it for this job, hence the use of Weebly, hoping to make things easier for myself and for my employer to take over the site when everything is working well. I have been having a problem with links not performing correctly in Chrome and Edge, working fine in Firefox and Safari. I have been looking for the past 3 days now and tried a whole bunch of things without success.
I have built pages more like the main menus being one page and the submenus links to anchors within that page.
With the way Weebly works, I didn't see a way of adding an "id" attribute to any "Title" or "Text" element you use to struture your content. So I started with the fallowing sample code, interjected where needed:
<a name="anchor-name"></a>
I was just placing an "embed HTML" element a little above where I wanted the link to land to compensate for the menu always being at the top. This simple solution works fine with Firefox and Safari. But for some reason, with Microsoft Edge does not take me to the anchor, just stays at the top of page; using Chrome, it doesn't work properly when opening the link from an outside source, link from email or doing a right click and "open link in new tab", it jumps further than intented but works fine once you're on the site and go through the different sub-menus. Very puzzling...
In my research, I came across people with similar problems, never really the same. But I tried this more elegant way, creating a CSS class with the negative top to compensate for menu and changing display to "inline-block", some saying it corrected there problem with IE. No luck for me, Firefox still working fine though.
.nav-anchor{
display: inline-block;
position: relative;
top: -150px;
visibility: hidden;
}
I came also across someone saying to check for errors with the W3.org validator, see result here. The first error is :
Error: X-UA-Compatible HTTP header must have the value IE=edge, was
IE=edge,chrome=1.
I couldn't figure out how or where to change that, I looked through the Weebly editor > Theme editor in all the files and didn't see it anywhere. So not sure if I can add it someplace, or if the Weebly just includes that part for you. Any idea if that's is on the path of solving my problem?
I haven't taken the time to go through all the errors, can the errors make the links not perform correctly?
The answer here (thank you Jeffrey Kastner) did help some what with Chrome, Right-click > "Open in new tab" on a submenu link now sometimes takes me to the right spot, sometimes jumps too far down. I tried over and over with the same link, seemed random. I haven't got feedback from client using IE.
Thank you in advance for any help
(edit:greetings and thank you note disappeared on first post for some reason)
The short answer for your question is you'll want to add meta tags with those in your site's theme within the various types of header template files.
In the majority of themes I have seen used on sites at Weebly, the following "Header Type" files are in the theme editor, and you would need to add the following to each of those as children to the head tag:
header.html
no-header.html
splash.html
(of course, your list may be different depending upon the theme you're using on your site).
The meta-tag HTML code you need to include as a child to your head tag would be:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The chrome=1 part is usually no longer required since the Chrome-frame was discontinued in 2014, but many people still include it as part. What is happening is you're instructing Internet Explorer to operate in "standards" (the latest rendering engine). The full answer to what this tag does with this setting is available in more comprehensible detail in this stackoverflow question.
I'm not sure if this will completely resolve the issue of your links not operating as expected, since there are many things which can intercept or interrupt the event bubbling process which occurs such as: javascript, frameworks, CSS issues, and many more things. If you were to provide some more concrete information and code examples with errors about what you're seeing, I might be able to help further.
Also, you may want to search in the Weebly Help Center and Knowledgebase, consider asking this question in the Weebly Developer Community or for a more personal engagement, by creating a Weebly Support Case.
I am using Adobe Dreamweaver to create HTML, I have few buttons on a html page, but when i added few more buttons in code mode, design more is not showing any buttons and elements, but I am able to view the output. Is there any solution for this
This might not be the answer you want to hear Rajesh, but DW's design mode is simply terrible and always has been. You are far better working solely in code view, and using the browser to monitor progress.
You can develop locally using something like XAMPP, and hook the browser up with LiveReload and you'll see instant changes reflecting the code, rendering DW's design view pretty much useless.
I don't have direct Host or Superuser access to DNN and the way our system is set up I wont get access to those accounts. It is a policy where i work. Is there ANY way to get your HMTL/CSS to actually work as you put it into the DNN HMTL editor? I have tried adding things like an accordion sidebar, tabbed area, and a simple CSS image hover. DNN takes my code and jumbles it up so that it does not work correctly. I have taken markup straight from my text editor, into dnn (that was working fine in the browsers before i took it into DNN) and it shows up, but does not act like it should or the code gets jumbled and breaks and I spend an hour trying to fix it EVERY TIME.
Has anyone out there had the same issue, or any suggestions, tricks to get your markup to work correctly in DNN.
Thanks,
Yes and no, you can't add scripts in the html editor and if you are copy-pasting something that has a FORM element, it won't directly work without modification.
One possible way to keep your javascript working is to move it to the Header or Footer options in the module options of that module instead of the content.
As for if your code contains a FORM element, you can use javascript to modify the Asp.NET FORM element to suit your need, see http://dotnetnuke.bz/Articles/tabid/156/DotNetNuke/98/How-to-Include-Multiple-Forms-in-DotNetNuke.aspx for more details.
I am new to jquery mobile . I am developing ipad app using phonegap and jquery mobile(1.0.1).
I need to add splitview for my application. I have searched in google and found "http://asyraf9.github.com/jquery-mobile/" .
But It doesn't work for me. My question. Is there any other tutorial for splitview or better way to add asyraf9 solution to my apps?
Thanks you very much.
I've also experimented with the solution from asyraf9 but it doesn't seem to work very well (and isn't that configurable either unless you want to poke around in it's source). It also hasn't been updated in many months by now.
I ended up using Sencha Touch instead which looked better and have a whole company behind it, not a single developer. It isn't a plugin for jQuery though so it doesn't use the familiar $-syntax but that also means that it probably will work fine if you want jquery for handling other stuff (like xhr). Check out a demo of their splitview and other mobile controls on the link below.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
Splitview was done for JQM <1.0. The way it's set up, it is difficult to integrate with JQM, because it basically disables the navigation and viewport and then sets up it's own. So if you would get splitview to work, you would be bound to the single page you are working in.
If you want to try an alternative, have a look at multiview(Github), which I started based on splitview, but which runs using JQM navigation. It's still work in progress, but I need for a project I'm doing, so I'm patching it up as I go along.
You will need to use my modified JQM version. There are two tweaks left inside JQM, which I ahven't been able to remove so far.
I'm working on something similar. I'm using jQuery's .load() and it seems to work quite well
$('#sidepanel').load('path to file you're trying to load.html', function(responseText, textStatus, XMLHttpRequest){
$('#sidepanel').trigger('create'); //this applies the jquery mobile stylings to the loaded content
});
sidepanelis the container for the secondary view you want to load things into