I'm developing an application that contains a menu with links to the several pages and I would like to know what's the best way to implement it.
One solution is to create the menu on all pages via JavaScript, but it would duplicate menus when it should have just one global to all pages.
Another solution would be to create a div outside the framework but this way would not be taking any advantage of the features of the framework.
At the present version of jQueryMobile 1.0a4.1 the only solution I found was creating a div outside the jQueryMobile page structure.
HTML:
<div id="global-header">Header</div>
<div data-role="page">
...
</div>
CSS:
#global-header {
position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 100%;
z-index:99999;
}
.ui-page {
padding-top: 40px;
}
I prepared this post specifically for this question, It deals less with fixed headers and footers (since I generally believe them to be misguided wastes of already limited real estate) and more about dealing with global navigation in general. Hope this helps.
Check the plugin I'm writing, called multiview.
It's still work in progess, but you can set a global header/footer by placing it inside the wrapper page, but outside any panels you are using.
Let me know if this would fit your need. I'm slowly progressing towards bug-fixing stage.
Related
Link: http://up8.431.myftpupload.com/services/
I need to turn the section on the page above into clickable buttons. I'm using WordPress with the elementor plugin installed.
I've already added some extra CSS to make the sections appear to clickable. I just need to add the actual functionality. I understand this is done with javascript. I haven't tried adding any javascript code yet. I'm a little hesitant too because I don't think I have the skill and knowledge to do it properly. I don't want to just start adding code everywhere. Past experience has thought me that's a bad idea.
I'm hoping someone experience with elementor can help me out. Here's where I'm stuck:
Where do I add the javascript? There's nowhere for me to add javascript like there is a section for CSS for each element. Should I add it in the customizer (Appearance --> Customize --> Custom CSS/JS)? Should I get a plugin for custom javascript? I've already given each element a custom class. I could attach some JS to these classes.
EDIT: Thought about it a little more. I don't think adding the JS in the Customizer is the way to go. I'm thinking any CSS/JS I add there should be exclusive for the topbar, header, and footer. My reasoning is because these are the sections that will show up the exact same way on each page.
That leaves me with the option of getting a JS plugin. Is this the best way?
What would be the best way to accomplish what I need to. I definitly don't have the skill to understand the Elementor Developer Docs. It's way too advanced for me. That's why I'm asking here.
Thx in advance
if you know how-to and it's through javascript you can do it this way:
Drag and drop HTML widget-> insert your js between script tags.
I recommened using html in your footer(made with elementor) so the script will be available in entire site.
I managed to find a way to do so without any plugin or js, just CSS:
First we need to set a minimum height for our Section/Column (I set 50vh);
then we have to add an element which has link/a tag (e.g. Title Widget) and set a CSS class for that (in my example .mhdizmni_title);
now we have to write a bit of css:
.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
I have a rich SPA application with some "material-design cards" (maybe not in the strict sense) like this one:
and I wonder if the "a" html tag is appropriate to handle the click on the card to open the content full-size.
As you can see, it's a rich widget on which you can do interactions (as the like/comment/tag buttons). I can have to display a link inside this card (the "source" of the content actually displayed, for example nytimes.com)
When the user click (or touch, because it's also a Cordova/mobile app) the card then we should go to the card item's url and view the card item in full-screen (unless the click is on a card button...)
So I thought about using a link (a tag) as a wrapper around the card, but it seems illegal because I already have the source link inside the card:
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
So, how am I supposed to solve this use-case?
A very important thing to note is that I'd like to preserve some of the defaults that come with links, including the fact that clicking it with middle click/ctrl opens in new tab, or that on hover the link is displayed at the bottom of Chrome... I know I can use history.push but this seems quite annoying or even impossible to reimplement all these defaults in plain JS...
A very important thing to note is that I'd like to preserve some of the defaults that come with links, including the fact that clicking it with middle click/ctrl opens in new tab, or that on hover the link is displayed at the bottom of Chrome...
First of all, great that you’re thinking about this – a large number of developers don’t, but just go “Ah, I’ll just drop a click handler on it, and then open the URL via location.href, and that’s that done & dealt with …”
Giving user’s their accustomed browser UI & functionality is a big part of accessibility IMHO.
So, since links can not be nested into each other (which makes sense of course, the resulting behavior would just be undefined – do we open the target URL of the inner link, or the outer?), another solution would be to emulate what you want to achieve via a little CSS trickery.
.card {
position: relative;
z-index: 1;
display: inline-block;
width: 100px;
padding: 50px;
background: #ccc;
}
.cardlink {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
<div class="card">
<a class="cardlink" href="#fullcardview"></a>
<p>Foo bar baz</p>
<p>
Like
</p>
</div>
A container element for our card, positioned relative (so we can use it as anchor point for absolute positioning of descendant elements).
In that, the first element is our link to the full version of the card (I only used anchor links here, to demonstrate the principle) – but it does not enclose any of the other card content, it is basically just empty. (To take care of accessibility, like putting a descriptive text inside it for screenreader users, and hiding that again for visual devices, I’ll leave up to you.) That element gets absolutely positioned, and specifying 0 for all four corners will make it stretch to cover the whole parent element automatically. Plus a z-index: -1 to put it “behind” the rest of the content that follows.
If you check my snippet (or as a fiddle, here: https://jsfiddle.net/Lz4o9114/1/), you should be able to hover over the “like” link and see it show ...#like in the browser status bar, whereas hovering the rest of the card should show ...#fullcardview. Opening #like or #fullview in a new tab via context menu should work as expected, as should middle click/ctrl … the whole shebang.
Now this is a very basic use of z-index here … depending on your actual card content and structure, you might have to do a little more to get it to work (like giving the rest of the card content a higher z-index than the card link.)
z-index can be a bit of a “fickle mistress” – for more details on stuff like stacking contexts etc., I recommend Philipp Walton’s excellent article What No One Told You About Z-Index.
Last but not least, I agree somewhat with the concerns Dávid Horváth raised in his comment – it might be unexpected to the user that the whole card acts as a link. They might f.e. just click somewhere on it, after they selected some text, to remove that selection again … or for whatever other reason. So perhaps only making a portion of the card clickable might be the better choice after all.
(Plus, how this behaves on touch devices, when the user just tries to scroll the page or pinch-zoom, also still needs some investigating/testing for sure.)
I'm trying to implement something like this: http://code.google.com/p/iab-billboard-adunit/ , on my site...
The demo for it is here: http://johnpaulkelly.me/iab/js_nobranded/index.html
My main issue is that I'd like to make the ad an image and not a flash file. It's easy enough to insert a .jpg into where the ad would go (in the Javascript itself), but once I do that I lose the "Close Ad" button which is part of the Action Script functionality.
Could someone help me out, or suggest the best possible way to go about appending the "Close Ad" functionality to an HTML element versus having it be part of the action script? (And not interupt the generation of the cookie)
Is this easily possible? I'm new to Javascript in general, but I could likely figure it out once I'm pointed in the right direction--I just can't seem to wrap my head around the easiest way to go about doing this...
If it makes it easier, I don't need to retain the "Show Ad" button once the cookie has been set if it makes it any simpler...
(Again, perhaps this is not the best way to do something like this--so if someone has an alternative way of going about similar functionality...I'm completely open to trying it out)
If you simply want to add a hide AD link, add your image and a link in the function loadBanner() by changing the second line using your own image url. You will also need some css to style that close text.
Just noticed that this code will be inside the iframe. It will need to call out to the parent for the close function like this.
Javascript:
window.frames["banner"].document.write('CLOSE AD <b>X</b>');
CSS: This needs to be in the iframes code
#closeAd {
position: absolute;
right: 0;
color: white;
text-decoration: none;
padding: 2px;
line-height: 1em;
}
First than all sorry that I can put code here, the best way is to see the live site.
WHen I go to www.theprinterdepo.com, the menu is acting weird on the onmouseover.
However when I go to a product page it works fine.
I am trying to know whats going on in the html but I cant find the problem.
pasting the entire generated html wont do any good.
This is a magento ecommerce site. so either its a problem with html, js or css?
Once detected I could paste the original code that generates that part of the problem
I got it! There is class named "over" in line 28 on any of your css(may be in assets new.css) remove that class & everything will be fine. Below is the given class.
.over {
left: 40px;
position: absolute;
top: 10px;
z-index: -1;
}
I am attaching image regarding this class. https://dl.dropbox.com/u/19982181/svs.jpg
i have popup-window in my script. I use window.open, but almost all browsers block this kind of windows. So i wanna change it to another popup, which include php-script. I saw it at another sites. As i understand, they use ajax. Could you provide for me some more info?
Try out the solution provided by thickbox, I think this is what you're looking for.
First, you create a div (or other element) with the aspect you want, adding it the following extra CSS:
#popup {
display: none;
position: absolute;
top: 100px; // changeable
left: 100px; // changeable
}
Then you use JavaScript to change the CSS making the div visible, and add the XHTML response from AJAX to its innerHTML.
I'd recommend using jQuery or other easy-to-use framework if you're used to JavaScript / AJAX.