My code is as follows:
<h3 class="ds-option-set-head">Compartilhar</h3>
<div class="ds-option-set" id="sharebar">
<ul>
<li onclick="shareFunction('fb')"><img src="themes/UFSC_producao/images/facebook.svg"></img></li>
<li onclick="shareFunction('tw')"><img src="themes/UFSC_producao/images/twitter.svg"></img></li>
<li onclick="shareFunction('lk')"><img src="themes/UFSC_producao/images/linkedin.svg"></img></li>
<li onclick="shareFunction('gp')"><img src="themes/UFSC_producao/images/google-plus.svg"></img></li>
</ul>
</div>
These images just appears at the initial page mysite/xmlui and I don't know why. Any suggestions?
Related
I'm making a WordPress website and I created everything outside of it. Now i'm getting it all together but I'm pretty new to this. I would like to create a Wordpress loop to get images from a gallery, replacing the img tag.
------- Edited -------
So there was a small change in the design but same problem. I need to get the images from a gallery in Wordpress to fill two slideshows with the same images.
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
I edited the question
As the question has been updated, I'm updating my answer to fit the new requirements. Basically, I've just added a parameter to the _GetSSImages() function. This allows you to pull the images from a specific slideshow, assuming that the class="" is unique for each slideshow. If not, then I would need to adjust the structure of the function.
----Original answer with updated code:
There are few things I don't know, such as how you intend to display the list of images from the slideshow, or how the client will edit this list.
However, you can use the javascript function below to grab all of the image src attributes from the slideshow HTML based on what you've shown here. The function returns an array of all src attributes so you can call it wherever you need to in your code to get the list.
function _GetSSImages(slide) {
var slideEls = document.querySelectorAll(slide),
slideImgs = [];
for(var i = 0; i < slideEls.length; i++) {
if(slideEls[i].querySelector("img").src != null) slideImgs.push(slideEls[i].querySelector("img").src);
}
return slideImgs;
}
var slideShow1 = _GetSSImages("mySlides1"),
slideShow2 = _GetSSImages("mySlides2");
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
I am unable to ascertain what attribute is fixing the width of the navbar, so as to reduce it from the borders. The CSS is too big so I had to use JSfiddle
<nav id="NAV_1">
<ul id="UL_2">
<li id="LI_3">
Home
</li>
<li id="LI_5">
About
</li>
<li id="LI_7">
Blog
</li>
<li id="LI_9">
Freebies
</li>
<li id="LI_11">
Resources
</li>
<li id="LI_13">
Start a Blog
</li>
<li id="LI_15">
Shop
</li>
</ul>
</nav>
Why does #UL_2 have margin: 0px 543.031px;? That's where your whitespace is coming from. Removing the margin is enough to make the navbar display as normal:
http://jsfiddle.net/vicvipe/tbq0nhk1/
Line 83 in the CSS.
margin: 0px 543.031px;
I am trying to align a button properly as a secondary content within a collection. However, no matter what I try, I cannot get the button centered. See image below:
Current Layout
Code snippet:
<div class="section">
<ul class="collection with-header">
<li class="collection-header">
<h5>Drawing basics</h5>
</li>
<li class="collection-item">
<div>Public Policy and the Community<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
<li class="collection-item">
<div> Introduction to Geology Studies
<button class="btn waves-effect waves-light right"> Create
</button>
</div>
</li>
<li class="collection-item">
<div> Global Perspective<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
</ul>
</div>
What can I do to solve this? I've tried almost everything.
Well I couldn't get it to work as I'd like to but it works with this hardcode....
.fix{
float: right;
margin-top: -8px;
}
https://jsfiddle.net/ggcewqaL/2/
Maybe this answer is a bit late but here is the fix without the need for an additional CSS class.
<ul class="collection with-header">
<li class="collection-header"><h4>Drawing basics</h4></li>
<li class="collection-item"><div>Public Policy and the Community<i class="">remove_red_eye</i></div></li>
<li class="collection-item">
<div>Introduction to Geology Studies
Create
</a>
</div>
</li>
<li class="collection-item"><div>Global Perspective<i class="material-icons">remove_red_eye</i></div></li>
</ul>
I just added an anchor tag inside the second div and styled it with .btn class
Create
I hope this would be helpful for someone at least!
I need to know how to create a navigation bar with Unsemantic framework (or 960gs).
My menu structure is
<div>
<ul>
<li></li>
</ul>
</div>.
I have tried so much, but still can't find out the problem.
EDIT
I use wordpress.So it creates navigation menu. the eventual code rendered in the browser is as follows:
<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper">
<div class="grid-container">
<div class="menu">
<ul>
<li class="page_item page-item-2">
ُSample Page
</li>
<li class="page_item page-item-5">ُSample Page 2
</li>
</ul>
</div>
</div>
</nav>
While my Wordpress markup is as follows:
<div class='grid-100 height-auto black-gray-bg font-tahoma'>
<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'>
<div class='grid-container'>
<?php
wp_nav_menu();
?>
</div>
</nav>
</div>
The grid-container class is for the outer container and the grid-parent class for inner or nested containers. In your code you have this backwards.
The grid-parent class lets you align self-contained grids with normal grid items. The container holds all of the grid items. So the grid-parent is just an indicator that the or whatever will contain further items related to its scale and ordering on the page.
You can use this structure, or similar:
<nav class="grid-container">
<ul class="grid-100 grid-parent">
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
</ul>
</nav>
I have the following code and I want to highlight the currently selected tab using css.
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
is there any way I can do this? I know css hover gives the element on which mouse is hovere, is there something similar for selected
thanks guys,
yes I do need dynamic handling, so I did the way you told. I capture the click event on that tab and the class. in css I apply the required styles to that class but it doesn't work.
here is my code:
in javaScript:
$('#summary').click(function(){
$(this).addClass("selected");
alert(" summary");
});
HTML code:
<div id="Maintabs">
<ul>
<li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS code:
.selected{
background-color:#FEE0C6;
}
what do you think I am doing wrong??
I'm not sure how you are using pure CSS to produce a tab effect. You would normally need Javascript or jQuery to dynamically change what the current tab is.
However, if you are using Javascript or jQuery for the tab effect, you could simply add a class to highlight the selected tab.
For example, this could be your jQuery:
$("#tab1").addClass("selected-tab");
And this your CSS:
.selected-tab
{
/*Some style to highlight it and show it's the selected tab*/
}
You're going to want to make an active class. By giving your li the defined class active. Then you can use css to make the .active a different color, size, shape, etc
Here's an example (first li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li class="active"><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (second li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (third li):
HTML
<div id="Maintabs"> <ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS
#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}
The result will be the active tab being black (#000), and the inactive tabs being light grey (#ccc)